Introducción

Este artículo intentará ser la apertura de una serie que nos ayudarán a confeccionar nuestros menús en forma clara. Primero vamos a arrancar de la base: utilizaremos solo CSS modificando nuestra estructura HTML.

Se que este tema está mas que trillado … pasa que uno no pierde el entusiasmo de generar experiencias y compartirlas. En este artículo se implementa el menú solo con etiquetas anchors <a>.

La idea es ir mejorando de a poco la calidad y complejidad de los mismos implementando efectos visuales, seguramente con MooTools.

Entonces …

Al finalizar este pequeño tutorial deberías poder implementar fácilmente estos dos menús, uno horizontal y otro vertical.

El layout

Extremadamente sencillo. Una de las cosas que me impulsó en hacer este cursito es la inquietud de implementar el menú sin listas (ul-li); cosa que se utiliza comúnmente. Sólo utilizaremos tags anchors o anclas <a> dentro de una capa.

Entonces definimos un identificar id para nuestra capa y dentro de la misma pondremos solamente nuestros enlaces del menú. Algo similar al código mostrado; más simple imposible.

<div id="miMenu">
    <a href="#link1" title="Link 1">Link 1</a>
    <a href="#link1" title="Link 2">Link 2</a>
    <a href="#link1" title="Link 3">Link 3</a>
</div>

La hoja de Estilo

A continuación presentamos el css principal para lograr el menú horizontal. En este caso lo más destacable a comentar es el cambio de la propiedad display:block en los anchors. Esto nos permite manipular el elemento del menú acorde a nuestra finalidad; ya que por defecto no podríamos definir alturas, anchos, paddings, margins, etc. en forma correcta.
Al definir display:block tendremos el inconveniente de que ahora los links se posicionan uno debajo de otro; esto lo solucionamos haciéndolos flotantes float:left.

Lo demás es jugar con los borders, fondos, margenes, y cuanta cosa se nos ocurra.

#menuH {
    padding-left: 20px;
    background: #F6A;
    height: 30px;
    border-top: 5px solid #C06;
    font: normal bold normal 9pt 'Arial';
    }

#menuH a {
    font-weight: bold;
    text-transform: uppercase;
    background: #B06;
    display: block;
    float: left;
    padding: 4px 8px;
    margin: -5px 5px 0 5px;
    border-bottom: 2px solid #A02;
    border-top: 5px solid #C06;
    text-decoration: none;
    color: #FFF;
    }

#menuH a:hover {
    border-color: #806;
    background: #FDE;
    color: #604;
    }

Para poder ver el css completo directamente observen el código fuente de la página generada. Esto también sirve para ver el menú vertical. Observen como en este los anchors se definen flotantes, como un bloque (display) y también el ancho para generar armonía en el menú entre otros detalles más.

Final Anunciado

Como dijimos en un principio este artículo es el pié inicial para generar modificaciones sobre una base sólida. Justamente es este el objetivo: Algo sólido, que funcione, que sea lo más liviano posible y que valide frente a la W3C, tanto en CSS como en XHTML; cosa que tanto el menú horizontal como el vertical lo logran.
Hasta el próximo menú.