Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Uso de CSS 3 - Transiciones (II) - Creación de un menú

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:

Imágen del menú en CSS-3

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:

Demo menu desplegado con display: none

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...

T F G+

Escribir un comentario

¡Gracias por dejarnos tus comentarios! — por favor intenta mantener tu opinión relacionada con la anotación, no usar insultos, agresiones, o faltas de respeto al autor y otros participantes de la discusión, en caso de no hacerlo tu comentario podría ser borrado.
A excepción de la página web, el resto de datos solicitados son necesarios para incluir comentarios. El email no será mostrado en los comentarios. Tampoco será usado por parte del administrador para enviarle ninguna información ni será vendido a terceros para ningún tipo de uso.
Código de seguridad
Refescar

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar