Post on 27-Oct-2015
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