Menus verticales en CSS (1)

Imagen de Karim Boudjema
Por: Karim Boudjema
Dom, 03/05/2009 - 20:09

Veremos, en esta primera parte, como hacer menús simples con listas verticales en CSS (Cascading Style Sheets). Al estilo de listamatic, utilizaremos sólo una lista y le aplicaremos distintos estilos CSS. Veamos..

Una lista simple

Las listas vienen por defecto de modo vertical y con bullets redondos, por lo cual en este primer ejemplo, no aplicaremos ningún estilo CSS, pero solamente los tags HTML para crear listas (ul y li).

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Menu uno</a></li>
<li><a href="#">Menu dos</a></li>
<li><a href="#">Menu tres</a></li>
<li><a href="#">Menu cuatro</a></li>
<li><a href="#">Menu cinco</a></li>
</ul>
</div>

CSS
Ninguno

 

Una lista con bullets cuadrados

Sólo cambiamos la propiedad "list-style-type" y le damos el valor "square" (cuadrado). Los principales valores para esta propiedad son:

  • none
  • disc
  • circle
  • square

Haga clic aquí para ver todos los valores

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li { list-style-type: square; }

 

Una lista con imagenes (fondo css) para los bullets

Aqui cambiamos un poco. No daremos una propiedad de tipo list a nuestro tag "li', pero una propiedad que normalmente usamos para bloques "div". En este caso le daremos estilo con la propiedad "background" que formateará el fondo de nuestro tag "li".

Utilizaremos background-image: url(images/arrow.gif); para dar una imagen de fondo

Después: background-repeat: no-repeat; para que esta imagen de fondo no se repita

Y en fin: padding-left: 10px; para hacer recorer el tag li de 10 px a la derecha. Con ello, tendremos espacio entre la imagen y el tag.

Personalmente, prefiero este método en vez de simplemente reemplazar los bullets por imágenes con la propiedad list-style-image: url(imagename); que no es consistente entre los navegadores.

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}

 

Una lista con rollover

Para acabar esta primera parte, haremos un menú con rollover, es decir que cambia el fondo cuando ponemos el ratón por encima. Este tipo de menú es muy usado hoy (sobre todo con menús horizontal) y es un buen ejemplo para empezar con menús más avanzando que veremos en la segunda parte.

El rollover se obtiene convirtiendo los elementos “a” dentro de la lista en bloques utilizando la propiedad “display: block;” y cambiaremos el color de fondo utilizando la pseudo clase “a:hover”

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}