Menús con CSS

Una de las cosas básicas para la navegación de un sitio web son los menús. Así que hay que saber cómo crearlos si o si, y muy bien.

Podemos crear menus horizontales ubicados bajo el banner del sitio tanto como arriba para la navegación dentro de las principales secciones. Los menus verticales ubicados en algun costado del contenido podemos utilizarlos para los enlaces relacionados a la página que se está visitando, o utilizarlo para lo que se estime más conveniente.

Estos son unos ejemplos de como se vería el resultado de una buena maquetación de menu con XHTML+CSS válida para todos los navegadores.

Creando el menú con CSS

Las propiedades para maquetar el menu tanto horizontal como vertical son:

display
float
width
height (opcional)

Más todas las propiedades que se desee para darle un estilo definido.

La gracia es aplicar todas estas propiedades los enlaces para aprovechar sus distintos estados (:hover, :active, :visited o :focus) y para que estos puedan ser visualizados correctamente por cualquier navegador. Recuerda que Internet explorer 6 no admite dichos estados en otros elementos que no sean los hipervínculos.

Utilizaremos el siguiente XHTML para los dos menús de ejemplos:

<ul id="menu">
<li><a href="#enlace1" title="Inicio, título del enlace 1">Inicio</a></li>
<li><a href="#enlace2" title="Servicios, título del enlace 2">Servicios</a></li>
<li><a href="#enlace3" title="Clientes, título del enlace 3">Clientes</a></li>
<li><a href="#enlace4" title="Galería de imágenes, título del enlace 4">Galería</a></li>
<li><a href="#enlace5" title="Contacto, título del enlace 5">Contacto</a></li>
</ul>

El menu CSS horizontal

La propiedad display en conjunto de su valor block nos permite transformar un elemento a en bloque, hablamos de los propios enlaces o del selector "a". Float más un valor right o left nos permite hacer que el enlace convertido a en bloque quede junto a otro formando una cadena horizontal. Width y height ayudan para formatearlo con la medida que queramos.

El siguiente código CSS identifica las principales propiedades que mencionamos para maquetar el menu horizontal:

ul#menu {
    height: 25px;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    display: block; 
    width: 120px;
    height: 25px;
    float: left;
}

Hecho esto tendremos inmediatamente lista la maquitación y solo deberíamos empezar con la creatividad aplicando las propiedades que queramos para estilizar el menu. Es relativamente simple.

El menu CSS vertical

En este ejemplo se cumple el mismo rol pero algo cambiado. La propiedad width debe estar definida en el menu y no en los enlaces (ellos se adaptan a esta medida). Además, el menu es el que flota a la izquierda del contenido y los enlaces solo se deben convertir a elementos en bloque.

Agregamos un nuevo div en el ejemplo del XHTML para el contenido, para que este, quede con un margen igual a la medida del menu, mas un padding para separarlos.

ul#menu {
    float: left;
    width: 130px;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    display: block;
    height: 25px;
}

#contenido {
    margin-left: 130px;
    padding-left: 20px;
}