Menú horizontal con CSS y listas

Para hacer el clásico menú horizontal, vamos a utilizar listas no ordenadas, aunque en reaildad se pueden utilizar también las listas ordenadas, mucha gente prefiere utilizar las primeras antes que las segundas. Ya que esto es algo muy recurrido en infinidad de diseños, resulta indispensable para el novato aprender a hacer este tipo de elementos.

Aunque es algo básico, por favor no lo intentes si no tienes conocimientos elementales de CSS primero

Primero vamos a construir una típica lista con enlaces

<ul>
<li><a href="#">Principal</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Proyectos</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Contacto</a></li>
</ul>

Por supuesto no se ve nada interesante, y además dijimos que iba a estar vertical, así que para estar un poco más cómodos, introduzcamos esa lista en una capa y pongamoles de nombre menú. Entonces queda como sigue

<div id="menu">
<ul>
<li><a href="#">Principal</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Proyectos</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>

Por supuesto que cuando maquetamos es porque ya tenemos una idea previa, como ejemplo, haré que cada elemento del menú sea de 120 píxeles, si tengo 5, entonces obtengo que el ancho total seran 600 píxeles. También le daré un alto de 30 píxeles. Tanto el ancho como el alto los debe determinar usted ya sea con el cliente o a la hora de realizar su wireframe, mockup, boceto o como quiera llamarle. De momento, utilizaremos la fuente Verdana como primaria y la dejaremos a 12 píxeles. Inicie un documento nuevo en su editor favorito y asegurese de guardarlo como Hoja de Estilos en Cascada.

#menu
{
    width: 600px;
    height: 30px;
    font-size: 12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

En este momento, la apariencia de nuestra menú es la siguiente

Menú CSS Vertical

Lo siguiente será quitarle a la lista html las viñetas

#menu ul
{
    list-style: none;
}

Lo que le da un pequeño pero necesario cambio

Menú CSS Vertical

Ahora vamos a colocar de forma vertical a todos los pares <li> </li>. Esto lo logramos simplemente empujándolos ya sea a la izquierda o a la derecha

#menu li
{
    float: left;
}

En la imagen de abajo, se puede apreciar a todos los elementos ya en forma vertical, pero apilados

Menú CSS Vertical

Esto no es nada impresionante, así que vamos a continuar. Para darle el efecto que andamos buscando, afectaremos los enlaces convirtiéndolos en bloques con ancho y alto cada uno, eliminaremos la barra inferior de los enlaces y centraremos el texto dentro de cada bloque, luego pintaremos de un color el fondo de cada enlace y de otro el texto.

#menu a
{
    display: block;
    width: 120px;
    height: 30px;
    text-decoration: none;
    text-align: center;
    background-color: #003399;
    color: #FFFFCC;
}

Después de ese pequeño ajuste, nuestro menú luce completamente diferente

Menú CSS Vertical

Vamos a ajustar un pequeño detalle aquí, al centrar el texto este lo hace únicamente en sentido vertical pero no horizontal, para lograr el centrado horizontal vamos a empujar el texto varios píxeles hacia abajo, para esto moveremos el padding-top (margen interior superior) de nuestros enlaces, por ejemplo empujemos 8 píxeles hacia abajo, eso nos obliga a restarle esos píxeles al alto total del enlace, es decir vamos a #menu a y ajustemos a lo siguiente

    height: 22px;
    padding-top: 8px;

¡Y el ajuste ha funcionado!

Menú CSS Vertical

Para terminar, vamos a hacer que al pasar el ratón encima de cualquier elemento del menú, este se pinte de un color de fondo y letras diferentes, además de que regresaremos la barra inferior de los enlaces.

#menu a:hover
{
    text-decoration: underline;
    background-color: #000000;
    color: #FFCC00;
}

Dando un resultado final completamente diferente

Menú CSS Vertical

Recursos adicionales

  1. Ver el ejemplo funcionando
  2. Descargar Código completo
  3. Síguenos en Twitter
  4. Búscanos en Facebook