Criar um menu dinâmico com CSS

O seguinte estilo nos permite criar um menu similar aos de javascript, onde representamos seu estado de repouso (out) com uma cor e seu estado sobre (over) com outra.

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

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

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

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

#menu div.barraMenu a.botaoMenu:active {
background-color: #637D4D;
color: black;
}
</style>

<div id=”menu”><div>
<a href=””>Opção 1</a>
<a href=””>Opção 2</a>
<a href=””>Opção 3</a>
<a href=””>Opção 4</a>
</div></div>
background-color de a.botaoMenu : cor de estado repouso (out).
background-color de a.botaoMenu:hover : cor de estado sobre (over).
background-color de a.botaoMenu:active : cor de estado selecionado.

Fonte: http://www.criarweb.com/artigos/390.php

Deixe um comentário