9.2. Estilos avanzados

9.2.1. Menú horizontal básico

Partiendo de la misma lista de elementos del menú vertical, resulta muy sencillo crear un menú de navegación horizontal. La clave reside en modificar el posicionamiento original de los elementos de la lista.

Código HTML del menú horizontal:

<ul>
  <li><a href="#">Elemento 1</a></li>
  <li><a href="#">Elemento 2</a></li>
  <li><a href="#">Elemento 3</a></li>
  <li><a href="#">Elemento 4</a></li>
  <li><a href="#">Elemento 5</a></li>
</ul>

Aspecto final del menú horizontal:

Figura 9.9 Menú horizontal creado con CSS

El proceso de creación del menú horizontal consta de los siguientes pasos:

1) Aplicar los estilos CSS básicos para establecer el estilo del menú (similares a los del menú vertical anterior):

ul.menu {
  background: #F4F4F4;
  border: 1px solid #7C7C7C;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.menu li a {
  color: #333;
  display: block;
  padding: .3em;
  text-decoration: none;
}

Figura 9.10 Menú horizontal: estilo básico inicial

2) Establecer la anchura de los elementos del menú. Como el menú es de anchura variable y contiene cinco elementos, se asigna una anchura del 20% a cada elemento. Si se quiere tener un control más preciso sobre el aspecto de cada elemento, es necesario asignar una anchura fija al menú.

Además, se posiciona de forma flotante los elementos de la lista mediante la propiedad float. Esta es la clave de la transformación de una lista en un menú horizontal:

ul.menu li {
  float: left;
  width: 20%;
}

Después de posicionar de forma flotante a todos los elementos de la lista, el elemento <ul> es un elemento vacío ya que en su interior no existe ningún elemento posicionado de forma normal.

Como ya se explicó en las secciones anteriores, la solución de este problema consiste en aplicar la propiedad overflow: hidden; al elemento <ul>, de forma que encierre a todos los elementos posicionados de forma flotante:

ul.menu {
  overflow: hidden;
}

Figura 9.11 Menú horizontal: anchura y posicionamiento flotante

3) Establecer los bordes de los elementos que forman el menú:

ul.menu li a {
  border-left: 1px solid #FFF;
  border-right: 1px solid #7C7C7C;
}

Figura 9.12 Menú horizontal: borde de los elementos

4) Por último, se elimina el borde derecho del último elemento de la lista, para evitar el borde duplicado:

<ul>
  <li><a href="#">Elemento 1</a></li>
  <li><a href="#">Elemento 2</a></li>
  <li><a href="#">Elemento 3</a></li>
  <li><a href="#">Elemento 4</a></li>
  <li><a href="#" style="border-right: none">Elemento 5</a></li>
</ul>

Figura 9.13 Aspecto final del menú horizontal creado con CSS

El código CSS final se muestra a continuación:

ul.menu {
  background: #F4F4F4;
  border: 1px solid #7C7C7C;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
ul.menu li {
  float: left;
  width: 20%;
}
ul.menu li a {
  border-left: 1px solid #FFF;
  border-right: 1px solid #7C7C7C;
  color: #333;
  display: block;
  padding: .3em;
  text-decoration: none;
}

9.2.2. Menús avanzados

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, incluso con el aspecto de un menú de solapas o pestañas:

Figura 9.14 Ejemplos de menús horizontales con pestañas creados con CSS

El código fuente de los menús de la imagen anterior y muchos otros se puede encontrar en http://exploding-boy.com/images/cssmenus/menus.html

Además de los menús horizontales de pestañas, haciendo uso de las propiedades de CSS se pueden crear menús verticales y horizontales muy avanzados:

Figura 9.15 Ejemplos de menús horizontales y verticales complejos creados con CSS

El código CSS de todos los ejemplos de la imagen anterior y muchos otros se pueden encontrar en: http://alvit.de/css-showcase/css-navigation-techniques-showcase.php