Menú con efecto onmouseover con CSS

26.04.2005

Menú con efecto onmouseover con CSS

Por Federico Elgarte | 91,010 Lecturas
Archivado en: 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:

Califica esta nota:

(19 votos, promedio: 3.58 de 5)

Loading ...

Sobre el autor

Federico Elgarte
Webmaster de cssboulevar.com.ar

Comentarios

22 comentarios en total.

BURRRITO 18.05.2005 - 09:56 - #

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 09.06.2005 - 11:33 - #

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 - 10:30 - #

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 03.11.2005 - 05:04 - #

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 - 22:53 - #

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 06.06.2006 - 23:13 - #

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 - 20:08 - #

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.. )
a 14.07.2006 - 11:19 - #

aaaaaaaaaaaaaa
stock 27.07.2006 - 12:00 - #

esto no es muy estandar que digamos, es preferible usar un
stock 27.07.2006 - 12:02 - #

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 - 08:41 - #

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 - 08:56 - #

“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 04.11.2006 - 21:59 - #

Funciono estupendo!
pagines web 12.03.2007 - 04:35 - #

muchas gracias, ha sido de gran ayuda. Felicidades!!
Raul 13.03.2007 - 11:39 - #

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 - 22:02 - #

para Raul:
La pagina http://unidadlocal.com/
no utiliza css para el menu esta creado con java script.
Leena 23.08.2007 - 00:12 - #

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.
Wilson 11.12.2007 - 10:34 - #

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 - 15:03 - #

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 - 11:00 - #

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

Gracias
Saludos
Jorge 29.02.2008 - 08:57 - #

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;)
luis 05.07.2008 - 01:41 - #

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