Crea un menú para tu web con HTML

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>

8.2. 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.

 ul#menu {

     margin: 0;

     padding: 0;

     list-style-type: none;

     }

 #menu li {

     background-color: #AF7051;

     border: #5F4232 3px solid;

     margin: 1px;

     }

 #menu a {

     color: #F0D7B5;

     text-decoration:none;

     display: block;     

     padding: 2px;

     }

Inicio

Flores

Nosotros

Contacto

Noticias

Sigue aprendiendo sobre diseño web en el siguiente: enlace