Este va a ser un rápido ejemplo de cómo hacer un menú animado con transiciones de css, que tiene muchas posibilidades de crecimineto, y para eso usarémos las selecciones de :before y :after para no tener que rehacer un menú ya terminado y poder darle una rediseñada sin cambiar nada más que los estilos.
Primero necesitamos tener un menú hecho en html:
<ul class="menuSup">
<li><a href="#servicios">Servicios</a></li>
<li><a href="#clientes">Clientes</a></li>
<li><a href="#contacto">Presupuestos</a></li>
</ul>
En segundo lugar tenemos nuestro css, donde damos el estilo básico a todo el menú voy a dejar los archivos fuente para que puedan descargarlos.
.menuSup {
text-align: center;
margin: 5px auto;
}
.menuSup li {
display: inline-block;
margin: 0;
}
.menuSup li a {
display: inline-block;
text-decoration: none;
color: #ffffff;
transition: all .7s;
padding:1em 2em;
background: #333;
position: relative;
}
Ahora vamos a utilizar los :before y :after que son con lo que vamos a hacer la animación, hay que tener en cuenta que los dos son hijos de la etiqueta a la que pertenecen, en este caso el ancla, en el renglón 18 de la ventanita anterior usé una posición relativa para que los objetos que vamos a crear dentro del ancla puedan ser posicionados a su vez dentro de la misma.
En la siguiente ventana vamos a poner las propiedades generales del :before y el :after, primero para poder manipularlos vamos a poner content:"";. le damos un top y un left para ponerlos dos elementos arriba y al centro, el height va a poner un tamaño de alto y finalmente un ancho de 0 para que no se vean hasta que le demos un hover.
.menuSup li a:before, .menuSup li a:after {
content: "";
position: absolute;
top:0;
left: calc(50% - 0%);
height: 6px;
width: 0%;
}
Ahora vamos a dar las características específicas de cada uno de ellos, color de fondo y también la transición, que la pusimos específicamente en cada una porque tienen diferentes delays.
.menuSup li a:before {
background: #fff;
transition: all .7s .4s;
}
.menuSup li a:after {
background: #00aeef;
transition: all .7s .2s;
}
Finalmente vamos a agregar el ancho al que queremos que crescan los dos objetos y el left para que se mantenga en el centro de la caja…
.menuSup li a:hover:before, .menuSup li a:hover:after {
width: 100%;
left: calc(50% - 50%);
}
Este sería el ejemplo funcional del menú:
Estos son los archivos fuente: html y css
Espero les guste…
