Creamos un menú con una animación CSS3, solamente con hojas de estilo en cascada, sin necesidad de Javascript ni jQuery.
En este nuevo artículo de nuestro manual sobre animación con CSS 3 vamos a realizar un menú dinámico con tan solo HTML y CSS 3. Personalmente me ha parecido sencillo y puede darnos muchas posibilidades a la hora de maquetar nuestra web, ya que no necesitamos tener conocimientos de Javascript ni de jQuery.
Antes de ponernos manos a la obra, sugiero ver el resultado final en este enlace. Pero recordar que solamente los navegadores que soporten animaciones CSS lo podrán ver correctamente. En el momento de escribir este artículo los navegadores con los que verás bien el ejemplo son: Google Chrome y Safari. Aunque cabe destacar que Opera y Mozilla Firefox estan en base beta y algunas propiedades como transition y box-shadow funcioan.
Actualizado: para información extra sobre el tema de los prefijos, hay que señalar que la mayoría de los prefijos usados en este código que encuentras en el artículo no serían ya realmente necesarios, dado que son estándares completamente asentados. Te recomendamos aprender a usar PostCSS con el plugin Autoprefixer para que sea ese plugin quien se encargue de poner los prefijos que realmente hacen falta para cada caso. Encuentras más información en la categoría de PostCSS.
Lo primero que vamos a hacer es crearnos nuestro HTML, es decir, el código necesario que utilizaríamos para crearnos nuestro menú normalmente, eso si, realizado con DIVs y no con tablas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú animado con CSS</title>
<link rel="stylesheet" href="css/menu.css" type="text/css">
</head>
<body>
<div class="menu-general">
<ul class="nav">
<li><a href="https://desarrolloweb.com/html/">HTML</a></li>
<li><a href="https://desarrolloweb.com/css/">CSS</a></li>
<li><a href="https://desarrolloweb.com/javascript/">Javascript</a></li>
<li><a href="https://desarrolloweb.com/asp/">ASP</a></li>
<li><a href="https://desarrolloweb.com/php/">PHP</a></li>
</ul>
</div>
</body>
</html>Como podéis ver no tiene nada del otro mundo, es simplemente un menú en el que utilizamos un listado.
Bien pues ahora vamos a dar estilos a los DIV y al listado para crear nuestro menú dinámico.
Lo primero que vamos a realizar es un fondo, simplemente para que el menú quede bien en nuestro ejemplo.
html {
height: 100%;
}
body{
background: -webkit-gradient(linear, left top, left bottom, from(#34bdfc), to(#f5f8fa));
}Este fono es de un color azul que va degradándose a un blanco de arriba hacia abajo. El height: 100% del html ayuda a que el fondo se muestre en todo el tamaño de la ventana.
A continuación vamos a darle estilos a nuestro menu-general:
.menu-general {
position: relative;
float: left;
}Simplemente vamos a hacer que flote a la izquierda y que tenga una posición relativa (Esto es importante para que nuestra animación funcione correctamente).
Ahora ya pasamos a los estilos del listado de nuestro menú:
ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: 50px;
left: 100px;
padding: 60px 0 60px 0;
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;
}Aquí lo que hacemos es quitar los guiones del listado, situamos el listado y le damos un tamaño. Al final le damos la animación de transformar el tamaño del 50% al 100%. esto nos dará la animación que queremos, es decir, que se haga grande el botón.
ul.nav li a {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
background: #f77e08;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
-o-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-o-border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
-o-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
-o-border-bottom-left-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #0e169b;
-moz-box-shadow: 2px 2px 4px #0e169b;
-o-box-shadow: 2px 2px 4px #0e169b;
}En este estilo lo que hacemos es construir los botones de nuestro menú. Le damos un color de fondo, unas esquinas redondeadas, y una sobra alrededor.
ul.nav li a:hover {
background: #faef77;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}Y por ultimo le damos estilos a nuestro menú para cuando pasemos por encima con el ratón.
Con esto ya tendría que funcionarnos nuestro menú, eso si, recordando siempre que en el momento de escribir este artículo sólo funcionaba completamente para los navegadores Safari y Chrome y parcialmente para Mozilla Firefox y Opera.
El código completo de este ejercicio y el enlace al demo, para ver el resultado en funcionamiento lo encuentras en este repositorio de GitHub.
Seguro que con un poco de mano puedes mejorar el CSS y hacer que tu menú se vea más bonito. Lo importante en este artículo es que hayas aprendido a hacer las transiciones necesarias para que se generen esas animaciones. Es todo muy sencillo gracias a CSS3.