Menú rollover con CSS y una sola imagen

La facilidad con la que se pueden diseñar distintos tipos de menús rollovers en CSS nos ha facilitado el trabajo, ya no es necesario incluir código JavaScript ni crear distintas imágenes para poder hacer un menú atractivo y prolijo, sin embargo, hasta el momento no he podido leer ningún artículo que trate del background-position en la creación de rollovers.

En este artículo – tutorial vamos a crear un menú que cambia de color cuando posamos el ratón sobre él (a:hover) y cuando lo presionamos (a:visited), con tan sólo un archivo de imagen.

La ventaja de este original menú consiste en su simpleza, pues con unas pocas líneas de código podemos crear un menú con tantos botones como quisiéramos.

Crear la imagen para el rollover

Lo primero es crear la imagen que escalaremos con el css, para esto utilizamos cualquier editor de imágenes, en este caso estoy usando Fireworks MX 2004 y con tan sólo un par de minutos ya esta creada la imagen.

Crear el rollover con CSS

Lo importante de la creación de este archivo es la delimitada alineación de las imágenes web y el margen de unas con otras, debemos tomar nota de sus posiciones y tamaños, esto es muy importante pues con el css lo que haremos es escalar este archivo para mostrar sólo la parte de la imagen que nos interesa.

Para el ejemplo, estas son las medidas:

Ancho del Lienzo: 200px
Alto del Lienzo: 108px
Ancho de cada botón: 196px
Alto de cada botón: 32px
Borde de cada botón: 1px
Espacio superior, inferior, izquierdo, derecho y entre cada botón: 2px

Desde luego esto depende del gusto de cada uno.

Luego de haber diseñado el archivo lo exportamos como gif con fondo transparente.

En que consiste nuestro diseño, primero en eliminar los estilos, márgenes y relleno propios de toda lista xhtml, luego definir cada item de la lista como bloque, pues sólo se puede determinar la posición de un background cuando se aplica a un bloque, y finalmente, aplicar el background-position del a:hover y del a:active, pues del a:link ya lo estamos limitando con el height y padding de cada item. El resto es simplemente definir el texto, lo que en realidad importa, como dije antes, es saber los píxeles de la imagen para poder escalarla.

/* Primero definimos el añcho
de la capa, que debe ser del ancho
del lienzo: */

#menu {
width: 170px;
margin: 50px;
}

/* Definimos estilo nuestra lista */

#menu ul {
list-style: none;
margin: 0;
padding: 0;
font-family:Verdana,Arial,
Helvetica, sans-serif;
font-size:0.8em;
font-weight: bolder;
}

/* Ahora las características
comunes de cada item */

#menu li a {
text-decoration: none;
height: 28px;
display: block;
padding: 9px 0 0 24px;
background: url(botones.gif);
}

/* Ahora las caraterísticas
especiales */

#menu li a:link, #menu li a:visited {
color: #777;
}

#menu li a:hover {
color: #257EB7;
background-position: 0 -36px;
}

#menu li a:active {
color: #fff;
background-position:0 -72px;
}

Con esto ya esta creado nuestro menú vertical, fácil y simple, pero a la vez atractivo.

Código HTML para el menú rollover

Creamos la capa y la lista desordenada:

<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Tutoriales</a></li>
</ul>
</div>

La lista podría aumentar todo lo que quisiéramos y nuestra botonera seguiría manteniendo su mismo y prolijo aspecto.