:: CP - Recursos Web :: - Rollover Text Menu

Rollover Text Menu

Rollover Text Menu es un menu muy dinamico que al pasar el cursor sobre el, da un giro horizontalmente, es un recurso muy utilizado y de facil implementación. Finciona solamente con CSS sin necesidad de javascritp.

[ Ejemplo: ]

Información:
Nombre: Rollover Text Menu
Fecha: 28-02-2014
Creditos: dynamicdrive.com
Garantia: Si ?

Enlazanos:

Califica este recurso:

[ CÓDIGOS: ]

- Por encima de la pagina o extra head:

<style> ul{margin:0;padding:0;} li{display:inline;list-type:none;} a.glidebutton{display: inline-block;position: relative; color:#4A4A4A; /* COLOR DE LA LETRA */ background: #ececec; /* COLOR DE FONDO */ font: bold 14px Arial; /* FUENTE TAMAÑO Y TIPOGRAFIA */ letter-spacing: 2px;overflow: hidden;text-decoration: none;height: 30px;  text-align: center;border-radius: 5px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} a.glidebutton > span:first-child{ position: relative;display: block;height: 100%;padding: 6px; -moz-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} a.glidebutton > span:first-child:after{content: attr(data-text); display: block; width: 100%;height: 100%;-moz-box-sizing: border-box;box-sizing: border-box; padding: inherit;position: absolute;top:100%;left:0;} a.glidebutton:hover{ color: black; /* COLOR DE LA LETRA AL PASAR EL CURSOR */ background: #72cb47; /* COLOR DE FONDO AL PASAR EL CURSOR */ box-shadow: 0 0 4px green inset;} a.glidebutton:hover > span:first-child{ -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%);} </style>

- Donde quieras que aparesca:

Apuntes:
Puedes editar lo que es color, fuente, fondo del menu solo debes ir al primer script (El codigo CSS) y modificar donde lo indica el script.
Para los link's edita el segundo script donde tambien lo indica.
Si deseas añadir otros link's solo debes agregar este codigo:<li><a class="glidebutton" href="URL"><span data-text="NOMBRE LINK'S">NOMBRE LINK'S</span></a></li> - Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 144 visitantesGracias por tu visita!

Recomendamos:

| CERRAR