Menú horizontal con CSS y jQuery

En este artículo vamos a echar un vistazo y ver lo que podemos lograr con HTML5 y CSS3 en relación a los menús desplegables de navegación. También vamos a usar jQuery para manejar los efectos y añadir los retoques finales.

HTML5 lleva a la especificación de un elemento <nav> dedicado que se debe utilizar como contenedor de una estructura de navegación más importante, como los menús de navegación principal vertical u horizontal del sitio, o una tabla en la página de contenidos, por ejemplo. Internet Explorer por desgracia no es compatible con este nuevo elemento, sin embargo hay una solución sencilla que podemos usar, de los cuales estoy seguro de que todos somos conscientes.

Con CSS3 podemos acabar con lo que habría requerido el uso de muchas imágenes y, posiblemente, un contenedor de embalaje adicional o dos y dependen de (casi) únicamente en algunas de las propiedades de estilo nuevo, como las esquinas redondeadas y sombras, por ejemplo, que están disponibles para los navegadores que soporten. Una vez más, no todos los navegadores. El apoyo a estas nuevas reglas, pero podemos muy fácilmente dar vuelta la caída de soluciones para los navegadores que no pueden manejar nuestros estilos.

Ver ejemplo en funcionamiento