> Manuales > Manual de CSS 3

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="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>
</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.

Sara Alvarez

Equipo DesarrolloWeb.com

Manual