El menú con CSS

15 Mayo 2010
Posted in Contenidos - Resúmenes

Hay varias formas de implementar un menú en una página Web utilizando reglas CSS, auque lo más común es modificando las propiedades de las listas desordenadas, etiqueta  <ul> ... </ul>  y sus ítems  <li> ... </li>  y empleando la etiqueta de enlace  <a> ... </a> .

En primer lugar debemos distinguir entre menú horizontal y menú vertical. Tanto uno como el otro son semejantes salvo en el detalle de la posición en la que se muestran en la página.

El primer paso es distinguir la lista que formará el menú de las listas normales, para ello creamos  un selector ID llamado #menu.

Añadiendo / Suprimiendo la línea  float: left;  de la regla #menu li conseguimos un menú horizontal ( si la ponemos) o vertical ( si la quitamos). Evidentemente luego debemos posicionar el menú en el lugar que deseemos. En el ejemplo siguiente el menú es horizontal. Si queremos que quede por encima de la cabecera debemos añadir la propiedad clear: both; a ésta. Ver Ejemplo.

Modificando los estilos de cada elemento del menú y utilizando imágenes de fondo y las pseudo-clases :hover y :active, se pueden crear menús horizontales complejos, ejemplos de esto los puedes encontrar en esta dirección  http://exploding-boy.com/  : Ejemplos1, Ejemplos2.

Además existen otros muchos menús diferentes, horizontales y verticales, como los que puedes ver aquí: http://alvit.de/css-showcase/css-navigation-techniques-showcase.php.