Menú Rollover con CSS y una sola imagen

baluart6 Marzo 2005 - 1:00am 16 comentarios
Enviar por Email Imprimir

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.

.Menú rollover con CSS y una sola 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.

Diseño del Background

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.

Menú Rollover con CSS y una sola imagen

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

Comentarios

Imagen de Ernesto
Imagen de Bal

Si mal no recuerdo, modificando #menu li a. Los valores de height y padding-top. Tienes que ir probando. Si no puedes,  dime las dimensiones de los botones y el lienzo.Saludos.

Imagen de Ernesto

Nada no hay forma, el texto no consigo moverlo.Mi lienzo es 97px. por 75px. Cada bot

Imagen de Bal
Imagen de Sergio Salas
Sergio Salas

Hola, como lo podria hacer para que sea horizontal? saludos

Imagen de davidMacedonia
davidMacedonia

Muchas gracias Baluart simple, practico y funciona.
Así deberían ser todos los tutoriales ;).

Imagen de jhony
Imagen de Ernesto
Imagen de Ernesto
Imagen de Bal

Hola Ernesto, para hacer un men

Imagen de Ernesto
Imagen de carlos
Imagen de Ernesto

Yo los tengo en mi web uso el explorer 6 y no tengo ning

Imagen de Mayk
Mayk

oie io lo inetnte con exactamente  = solo cambie las medidas por que mis imiagenes son diferentes y no salioo ni siquieraa cambian las imagenes  soy nuevo en esto

Imagen de vixtor
vixtor

    Como lo puedo hacer para q en vez de que muestre una capa con el mismo nombre cambie. Titulo, muestra (capa) Titulo, este es tu ej yo quiero lo sgte.Como por ej: Al posicionar el mouse sobre titulo muestre "hola mundo"  no titulo.De antemano gracias. 

Imagen de atinimsoft
atinimsoft

Quisieras Saber el codigo como podria agregarle submenus

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más