EL HTML DEL MENÚ

El menú es un elemento fundamental de nuestra web, y hemos de dedicarle una atención especial.

Básicamente, el menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es encontrarlo en el html de la página, o en un archivo javascript. De momento, vamos a ver cómo crearlo desde el HTML.

La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, por ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>), y está forma es la que explicaremos. Si desactivamos los estilos del navegador (en Firefox, menú Ver → Estilo de página → Sin estilo; IE no tiene esta opción) o vemos el código fuente de webs como www.elpais.es o www.marca.es, podremos encontrar que en el lugar del menú aparece una lista.

Por tanto, cada elemento del menú es un elemento de la lista <li></li>. El elemento, contendrá normalmente un enlace (<a href=""></a>) a una página del sitio.

Observa que hemos el menú de nuestro ejemplo, siguiendo esta estructura:

<ul>

  <li><a href="index.html">Inicio</a></li>

  <li><a href="flores/index.html">Flores</a></li>

  <li><a href="nosotros.html">Nosotros</a></li>

  <li><a href="contacto.html">Contacto</a></li>

  <li><a href="noticias.html">Noticias</a></li>

</ul>

 Estilo básico del menú

Una vez creado el menú, todo lo referente a su aspecto lo haremos utilizando estilos CSS. Lo más cómodo será darle un id, por ejemplo id="menu". De esta manera podremos referirnos la menú como ul#menu, y a sus elementos como ul#menu li.

Las listas se muestran casi igual en IE que en Firefox, pero en el primero se desplazan hacia la derecha utilizando margin, y en el segundo padding. Para no liarnos, podemos comenzar por poner ambos a 0, y ya les daremos algún valor si lo creemos necesario.

Otra cosa característica de las listas son las viñetas. Podemos quitarlas con la propiedad list-style-type: none;, o utilizar una imagen con la propiedad list-style-image: url(imagen.png);.

Al final los elementos de la lista tendrán el aspecto de botones que se pueden pulsar. Pero esto no es cierto, ya que el enlace sólo está en el texto, porque la etiqueta <a> es un elemento en línea que se ajusta a su contenido. Podemos cambiar este comportamiento con aplicándole a los enlaces del menú la regla display: block. Esto lo convierte en un elemento de bloque, y hace que ocupe todo su contenedor.

Daremos un formato apropiado al texto, a los enlaces, y añadiremos un borde a los elementos para diferenciarlos. Todo esto en función del diseño que queramos conseguir.

Distintos estilos del elemento

Es habitual que los elementos de un menú tengan varios estilos distintos: el estilo normal; el estilo que muestra cuando tiene el cursor encima, que transmite al usuario la sensación de que se puede pulsar ése elemento; y un tercer estilo que diferencia el elemento "en el que estamos", es decir el que lleva a la página en la que el usuario está en ese momento, lo que le ayuda a situarse. Para esto podemos utilizar clases y pseudoclases.

Si no sabes cómo cambiar el estilo de un elemento al pasar el cursor sobre él, consulta este básico Básico en el que te explicamos las pseudoclases.

• También puede seguir el ejercicio paso a paso Utilizar pseudoclases CSS, en el que creamos un estilo para nuestro sitio de ejemplo.

Utilizar uno o varios de estos estilos dependerá del diseño que queramos conseguir.

 Puedes practicar cómo crear algunos menús con el ejercicio paso a paso Crear menús básicos.