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.
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 PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<html>
<head>
<title>Menú animado con CSS</title>
<link rel="stylesheet" href="menu.css" type="text/css">
</head>
<body>
<div class="menu-general">
<ul class="nav">
<li><a href="http://www.desarrolloweb.com/html/">HTML</a></li>
<li><a href="http://www.desarrolloweb.com/css/">CSS</a></li>
<li><a href="http://www.desarrolloweb.com/javascript/">Javascript</a></li>
<li><a href="http://www.desarrolloweb.com/asp/">ASP</a></li>
<li><a href="http://www.desarrolloweb.com/php/">PHP</a></li>
</ul>
</div>
</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.
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.
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.
Compartir en redes sociales
| Muy delicado tu menú dinámico Por: Rosario Alba | 18/4/2011
|
| visualización Por: gabriel | 18/4/2011
|
 phantom... | Buen codigo. | 19/4/2011 |
| Probado... Por: ignatz | 19/4/2011
|
| Menú | 21/4/2011 |
| como colocarlo en linea Por: dario | 27/4/2011
|
| Ninguno Por: Juan | 28/4/2011
|
claudit... | muchas gracias | 08/12/2011 |
Usuarios: 
14 de April de 2011
Valoración del artículo:
