CSS3: Menú horizontal

En esta entrada vamos a crear un menú horizontal para nuestra página, para esto debemos conocer temas como enlaces y listas de HTML ya q usaremos estos dos elementos para armarlo y también tener claro el concepto de herencia de estilo en CSS. Hay varias formas de menú, pueden ser verticales, horizontales, estáticos, animados, todo como siempre dependerá de nosotros. En este caso haremos uno sencillo q tenga el efecto de q al pasar el mouse muestre un bloque de submenú.






En la entrada anterior hicimos el maquetado de una pagina y creamos un menú vertical, es por esto q directamente codificaremos el menú horizontal:

-Nuestro HTML va a consistir en dos listas desordenadas, una será el menú principal y la segunda el bloque de submenú q aparecerá al pasar el mouse sobre la opción correspondiente, esto sería algo así:

Lo más importante en este es observar la relación de las listas, en este caso hay una lista con class="submenu" dentro del "li" correspondiente a la lista exterior q tiene un class="menu".

-El CSS sería algo como esto, véanlo y lo analizaremos juntos luego:

De todo este código, q en su mayoría esta dedicado al aspecto visual del menú principal, solo me importa destacar la última linea, donde haciendo uso de las propiedades de CSS decimos q al pasar el mouse sobre el link correspondiente (".menu li:hover") mostraremos el submenú ("display:block").
Este será el código del submenú:

De este se destaca la propiedad q oculta el submenu ("display:none") y la manera q usamos para acomodar la posición del submenú. Debemos aclarar q se repite sectores de código porque solo nos interesa destacar el funcionamiento del mismo, se puede optimizar juntando varias propiedades similares entre el menú y el submenú, así como también se puede jugar con las distintas propiedades para lograr otros resultados como ser un submenú vertical, o efectos q pueden crearse con CSS3.

Este sería el resultado:

y al pasar sobre en este caso "link 3" se muestra el bloque de submenú:

Y ahí lo tienen, un menú animado sin una gota de código javascript, modifiquen las distintas propiedades, cambien el aspecto visual y sobre todo diviertanse creando. Como siempre espero q les haya sido de ayuda, seguiremos con más CSS3 en próximas entradas, nos vemos...