Crear un menú dinámico con CSS

Código que nos ayuda a crear un menú con Css similar a los de Javascript.
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.

<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;
}
</style>

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


Ver ejemplo en marcha

Compartir

Comentarios

Sebastian

24/4/2006
Este menu con CSS no anda en Firefox, estaria bueno si anduviera bien.

Saludos

Juan Oropeza

31/10/2006
Me gustaría saber como hacer el menú pero dinamico por ejemplo que coloque la opción 1 y que me aparezcan las opciones a,b,c pero sin desaparecer las otra y en otro color

Raul

13/3/2007
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

ragnar

28/2/2011
No entiendo esas declaraciones de ID
Hola, me he leido un par de manuales de esta pagina y he aprendido todo el CSS que asi gracias a vosotros, pero en ninguna parte encuentro la razon de porque se declaran de esa forma esas ID, y por tanto, no puedo entender como funciona. Porque div.algo y a.algo? Me iria bien una explicacion o un link al manual k sea.

Gracias por vuestro esfuerzo.

Ruben

16/6/2011
acerca de los menus
Saludos, estoy viendo lo de los menus dinamicos pero como puedo generar submenus ya que no viene explicado aqui y me gustaria que me lo dijeran gracias.

Ana

13/8/2011
Menu dinamico
Hola!! sin ofender a nadie posteo el mismo código pero reducido, ya que realizar una página web resulta útil reutilizar código y no escribir tanto repitiendo. Ahí va:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<style type="text/css">


.alignMenu {
text-align: left;
}

.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

.cambiacolor a:hover {
background-color: #637D4D;
}

.activa a:active {
background-color: #637D4D;
color: black;
}
</style>

<div id="menu"><div class="barraMenu botonMenu alignMenu activa cambiacolor">
<a class="botonMenu" href="#">opcion1</a>
<a class="botonMenu" href="#">opcion2</a>
<a class="botonMenu" href="#">opcion3</a>
<a class="botonMenu" href="#">Opción4</a>
</div></div>

</body>
</html>

Javier Velasquez

28/11/2011
MUY BUENO
muchas gracias, estoy estudiando un poco de diseño web y no sabia como crear botones, ayudame para saber como ponerle fondo a estos botones o mejor aun, poner un menu que en vez que cambien el fondo que solo cambie de color la letra de los menus

karlah25

02/12/2014
URGENTE AYUDA?
Hola, tengo un problema con mi menu dinamico no me permite poner nada aun lado de el solo abajo