Menú con efecto onmouseover con CSS

Aunque en el pasado se ha utilizado muchísimo el javascript para generar efectos de cambio de color onmousover en un menú, con el uso de únicamente hojas de estilo podemos lograr el mismo efecto.

¿Para qué utilizar javascript cuando la solución está en CSS?

El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro.

Código CSS

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
} 

Código HTML

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="">Opción 1</a>
<a class="botonMenu" href="">Opción 2</a>
<a class="botonMenu" href="">Opción 3</a>
<a class="botonMenu" href="">Opción 4</a>
</div></div>

background-color de a.botonMenu: color de estado reposo (out).

background-color de a.botonMenu:hover: color de estado sobre (over).

background-color de a.botonMenu:active: color de estado seleccionado.

Ejemplo:

Federico Elgarte
Webmaster de cssboulevar.com.ar
BURRRITO
18/05/2005

muchas gracias por el dato, en cuanto necesite hacer este efecto con colores utilizare css y en cuanto sea con imagenes si usare el javascript.
saludos

No Registrado
9/06/2005

muy util, y agiliza la carga de la página, pero…. como podemos incluir submenus que se desplieguen al pasar el mouse.

Eric King
15/06/2005

Hola, Definitivamente es una gran opción, ya que el JS es bastante complejo, en lo personal estoy aprendiendo apenas css, y estoy haciendo de todo, me topé con que necesito hacer unos links, pecisamente de este tipo, sin embargo veo que únicamente se ajusta al texto en cuestión, por lo que ¿todos los nombres deben ser igual en tamaño? mi pregunta es:

¿cómo manipular el tamaño de los botones? ¿como le digo que tan anchos o altos deben ser?, por ejemplo en el caso de que quisiera manejar listas de archivos con nombre largos, digamos que quiero botones de un ancho de 400 px + -, porque es lo que cubrirían normalmente los titulos de algunos documentos, hay otros que son mucho más cortos, pero eso le daría un aspecto desordenado a la lista, unos más cortos y otros más largos; quiero que todos los botones sean del mismo tamaño aunque el contenido no sea igual. Además de que los presentaría en forma de lista vertical, cosa que he resuelto dando un salto justo despúes de cada botón.

Ok, espero que alguien pueda darme una luz, seguiré investigando de todas maneras. Un saludo a todos

ius
3/11/2005

esto se podria hacer para un thead en una tabla, en firefox funcionaria pero en ie, habria alguna posibilidad de crear ese efecto en la cabezera de una tabla.

Cayu
25/05/2006

bastante util este codigo, lo estoy usando en un menu con PHP y MySQL y queda bastante bien,lo q si yo uso GNU/Linux y todas las tipografias y demas cosas en Linux siempre se vieron bien con antialias y esas cosas, cosa que no pasa con IE 5 , para que se vea bien este codigo en IE tiene q ser con IE 6 o superior, y esto me di cuenta por sorpresa cuando miraba mis codigos con la maquina de un cliente :S
jaaj pero bue cosas que pasan

el codigo esta de 10

salu2

// http://cayu.com.ar //

cato
6/06/2006

o Seve vien pero como se podria aser con una imagen de fondo al pasar el maus?

// http://Anm-web.tk //

pablo
28/06/2006

Lo de submenues lo podes hacer desde comportamientos , ahi podes crear un submenu.. lo que si los submenu no pueden mostrar u ocultar capas (al menos aun no descubri como.. )

aaaaaaaaaaaaaa

stock
27/07/2006

esto no es muy estandar que digamos, es preferible usar un

    para hacer menus.

    have funnnnn

stock
27/07/2006

cato, o Seve vien pero como se podria aser con una imagen de fondo al pasar el maus?

// http://Anm-web.tk //

eso es posible con css, usa la funcion url(imagen.jpg); para poner imagenes a los objetos

have funnnnnn :adios:

4k1Les
31/07/2006

BURRRITO, muchas gracias por el dato, en cuanto necesite hacer este efecto con colores utilizare css y en cuanto sea con imagenes si usare el javascript.
saludos

No es necesario, podes utilizar el mismo css con imágenes…
les preparé un ejemplo que pueden ver acá: (www) akilesdesign.com.ar/menucss1/menu.htm

Para descargarse el ejemplo les dejo esta dir:
(www) akilesdesign.com.ar/menucss1.zip

Saludos!

- 4k1Les

4k1Les
31/07/2006

“BURRITO”,
muchas gracias por el dato, en cuanto necesite hacer este efecto con colores utilizare css y en cuanto sea con imagenes si usare el javascript.
saludos

No es necesario, podes utilizar el mismo css con imágenes…
les preparé un ejemplo que pueden ver acá: (www) akilesdesign.com.ar/menucss1/menu.htm

Para descargarse el ejemplo les dejo esta dir:
(www) akilesdesign.com.ar/menucss1.zip

Saludos!

- 4k1Les

No Registrado
4/11/2006

Funciono estupendo!

muchas gracias, ha sido de gran ayuda. Felicidades!!

Hola
Estaba viendo el menú de una pagina
http://unidadlocal.com/
pero no pude sacar como se crea el estilo para que se ve así podrían ayudarme

jesus
14/03/2007

para Raul:
La pagina http://unidadlocal.com/
no utiliza css para el menu esta creado con java script.

Leena
23/08/2007

Muy buen tutorial, pero me gustaria que explicaran como hicieron el menu de esta pagina. Es decir, como el border-bottom del link es mas largo que la palabra… considero que se ve muy bonito y me gustaria utlizarlo.

Esta perfecto el estilo lo he probado pero como hacer para que al momento que se pulse el ratón quede activo el menú………

fER_
13/01/2008

Heeeaa!!! Federico muchas gracias por este ejemplo… me estoy iniciando en la construccion de web’s y me a sido my util__:D
__

nan_do9
22/01/2008

que tal amigos esta bueno el tutorial alguna persona me puede indicar como hacer con submenus

Gracias
Saludos

Jorge
29/02/2008

Hola muy buenos dias ante todo un cordial saludo he visto el codigo y me parece muy bien y bueno de tu parte que lo compartas con otras personas, ahora mi pregunta es que quiero colocar un sistema de rating como el que tu tienes aqui para valorar, registrar votos e ip pero no sé como hacerlo agradeceria tu ayuda muchas gracias hasta pronto;)

Hola quiero aprender a manejar css porfa. no se quien me puede ayudar.. quiero unos botones que alpasar el mouse se cambie el color del fondo de la tabla donde esta el boton pero no se please

Tanusky
20/08/2008

Me ha encantado la idea y me parece una solución excelente, pero tengo un problemilla, soy nueva en todo esto y necesito un cable muy grueso. como pinto el menu con los enlaces que quiero a mi propia página web??
Estoy realizando la pagina sin marcos y con html corrientillo, y me encuentro que cuando tengo que hacer cambios en el menu, lo tengo que realizar en cada página y es un caos.
Una solución posible es este menu verdad?? Aperta de la genialidad de las css.
Me podriais ayudar
Muchisimassssssssss graciassssssssssss

Marta
11/03/2009

buenas, estoy intentando crear un estilo css en el que al pasar el raton por encima de una celda donde hay texto, el fondo se vuelva negro y el texto blanco…
no se como enlazar el mouseover/mouseout con el a:hover, o que deveria hacer… soy novata en esto. TEngo como referencia una pagina web (www)jordibadia.com si alguien me pudiera ayudar estaria muy agradecida.
Saludos

Jorgitsss
17/03/2009

Marta… si revisas el codigo fuente de esa pagina jordidabia notaras que es un script java el que hace el efecto que buscas,
luego de la url del sitio buscas la linea dentro del codigo fuente el src que esta entre comillas dobles y lo pegas al final de la direccion del sitio y asi logras obtener el archivo js
lo demas es dedicacion y copy paste… espero te sirva de ayuda ^^

y sobre esta pagina exelente la simpleza es belleza muchas veces

monet
7/04/2009

Está muy interesante el código y funciona muy bien. Solo que tengo un problemilla, necesito implementar submenus a mi menú… alguien podría orientarme un poco mas. Que aparezca el submenú al momento de pasar el mouse sobre el.

Gracias mil,

Yomisma
21/07/2009

¿alguien me podria decir como hacer para que sea vertical?? lo intento con tr y td pero nada.

De pronto no han publicado para hacer menu y que al pasar el mouse se muestre otros menu?????

Pero como hacer para esta pagina aca todo esta hecha en onmouseover para mostrar las imagenes un idea!!

http://es.minutemachine.com/home.php

298