Hoy un pequeño apunte de como crear un menú con HTML y CSS 3 que no tendrá nada que envidiar al de algunas páginas creadas completamente en Flash.

Al principio de este post, quería conseguir replicar el menú de la web de Apple, pero este hace uso de JavaScript en la opción del buscador (o yo no he sabido conseguir ese efecto solo con CSS 3), y el objetivo principal de este post es crear un menú enteramente en CSS 3, en lo que respecta a su comportamiento.

Para los más impacientes lo primero es mostrarle la demo del menú en CSS 3.¿os gusta?, bien pues vamos a ponernos manos a la obra...

Lo primero es el código HTML que he usado:

<div id="menu-1">  
 <ul id="menu">
 <li><a href="#">Opcion</a></li>
 <li>
 <a href="#">Opcion</a>
 <ul>
 <li><a href="#">Sub opcion</a></li>            
 <li><a href="#">Sub opcion</a></li>
 <li><a href="#">Sub opcion</a></li>
 <li><a href="#">Sub opcion</a></li>
 <li><a href="#">Sub opcion</a></li>            
 <li><a href="#">Sub opcion</a></li>
 <li><a href="#">Sub opcion</a></li>
 <li><a href="#">Sub opcion</a></li>                                                                                                        
 </ul>            
 </li>
 <li><a href="#">Opcion</a></li>
 <li><a href="#">Opcion</a></li>
 <li><form method="post" action="#"><input type="text" value="buscar..." onfocus="if(this.value=='buscar...') this.value='';" onblur="if(this.value=='') this.value='buscar...';"/></form></li>
 </ul>
</div>

Con el código anterior lo que hemos construido es un menú basado en listas. Podemos comprobar que una de las opciones contiene una sublista, con la que crearemos la opciones que a primera vista están ocultas y que se mostrarán al colocarnos en la opción padre como podemos ver en la siguiente imagen:

Una vez tenemos el HTML formado vamos a por nuestro CSS, ya que este va a definir todo el comportamiento del menú. De este cabe destacar el degradado del menú, algo más avanzado de los que hemos tratado en post anteriores Uso de CSS3 - Degradados.

ul#menu{
  background: -moz-linear-gradient(center top, #888888 0%, #707070 50%, #5E5E5E 50%, #797979 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8B8B8B),color-stop(50%,#707070),color-stop(50%,#5E5E5E),color-stop(100%,#797979));
  background:-o-linear-gradient(top,#8B8B8B 0%,#707070 50%,#5E5E5E 50%,#797979 100%);
  background:-ms-linear-gradient(top,#8B8B8B 0%,#707070 50%,#5E5E5E 50%,#797979 100%);
  background:linear-gradient(top,#8B8B8B 0%,#707070 50%,#5E5E5E 50%,#797979 100%);
}

Otro punto a destacar es el comportamiento del submenú, efectos que hasta no hace tanto parecía que solo podían conseguirse con el uso de JavaScript o Flash.

Para conseguir ese efecto vamos a comentar la líneas más importantes:

ul ul{
transition: height .3s ease 0s;
overflow: hidden;
height: 0;
}
ul .submenu:hover ul{
height: 19em;
}

Necesitamos de estas tres propiedades (transition, height y overflow) para que el menú degrade correctamente. En un principio pensé que con "height: auto; display: block" sería suficiente, pero no fue así, ya que "display: block" no funciona con la propiedad CSS3 transition y nos encontramos con un efecto no deseado. Para entenderlo nada mejor que una imagen:

Por otro lado tenemos que especificar un valor a la altura del menú desplegable, de otro modo no conseguiremos el efecto deseado. Por lo demás os recomiendo consultar la hoja de estilos  al completo. Decir que he comprobado el funcionamiento en varios navegadores que interpretan CSS 3 (Opera 11, Safari 5, Chromium 15, Chrome 15 y Firefox 8) y he de decir que Opera me ha decepcionado con la degradación de las transiciones. Por otro lado tanto Firefox , Chromium y Chrome son los que mejor trabajan con esta propiedad. En Internet Explorer 9 no he podido comprobarlo (desarrollo en Ubuntu y dispongo de una versión de Windows XP), espero que puedan comentar que tal se vé en esta versión.

Espero les sea de gran ayuda. Saludos...