Menú Rollover con CSS y una sola imagen

La facilidad con la que se pueden diseñar distintos tipos de 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 es común encontrar artículos que traten sobre el background-position en la creación de rollovers con CSS

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

.

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

La facilidad con la que se pueden diseñar distintos tipos de 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 mouse 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 simplesa, pues con unas pocas líneas de código podemos crear un menú de un sólo botón web ó con tantos botones como quisieramos.

Creación de la Imagen

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.

Lo importante de la creación de este archivo es la delimitada alineación de las imagenes 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.

Creación del Rollover con CSS

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

Y finalmente el HTML

Creamos la capa y la lista desordenada:

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

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

Ver el ejemplo terminado