Menú animado con CSS 3

  • Por
  • CSS
Nuevo ejemplo de animaciones CSS 3, en el que construimos un menú animado con HTML y CSS, 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.

Nota: Como la especificación de las animaciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko(Firefox 4). Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, especificarías la propiedad de transición como -moz-transition, -webkit-transition y -o-transition.

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.

Podemos ver el ejemplo en marcha en una página aparte.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

Rosario Alba

18/4/2011
Muy delicado tu menú dinámico
Hola Sara,

Tu menú es muy delicado. Me gustó, pero creo bueno decir que solo lo veo bien en el navegador Google Chrome.
Besos!

gabriel

18/4/2011
visualización
Lo estoy viendo en firefox 4 y se ve bien.

phantompau

19/4/2011
Buen codigo.
Me funciono bien con Chrome y con Safari, con los otros, no redondea la caja...
Aunque eso, ya lo dices tu en el articulo...
Eso si, lo que no me ha salido (copiado punto por punto tu codigo), es la separacion entre cajas, me salen todas unidas...
Un saludo.

ignatz

19/4/2011
Probado...
Muy bueno el menu, tambien funciona correctamente en Firefox 4, y en opera, pero en este ultimo, sin el border-radius, porsupuesto, internet explorer, no se entero aun, del progreso. Saludos! muy buen trabajo!

consuelo_quesada_mayorga

21/4/2011
Menú
Lo abrí con Mozilla Firefox y con Explorer y lo ví bien con ambos. Muchas gracias, por el artículo ya que es de gran ayuda. Está genial.

dario

27/4/2011
como colocarlo en linea
muy bonito
como se puede hacer que quede en linea el menú y no de forma vertical
gracias

Juan

28/4/2011
Ninguno
-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;


En serio?
Todo eso se puede simplificar a:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;

Además de que falta el "border-radius:10px", que es el método oficial del W3C.

Ezequiel

13/9/2011
Excelente
Muy bueno el articulo, esta genial.
Solo tengo una duda copie el codigo tal cual, pero los items del menu me salen todos juntos, que puede ser??
Desde ya muchas gracias. Saludos

clauditalujan

08/12/2011
muchas gracias
por el materil.
No pude descaragr el manual completo porque ya use mi cupo, pero creo que igual me servirá. Espero el año proximo poder $$ suscribirme y bajar mas material
Soy diseñador y programadora web y estoy intentando hacer todo en html y css 3. Apenas se pueda en html y css 4

Mar

03/6/2012
para que quede horizontal
Para que el menú quede horizontal, me ha funcionado lo siguiente:
Colocar en ul.nav li a un float:left;

Muy bueno el menú, gracias.