[TUTORIAL] CSS Menu

CSS possibilita definir uma variedade infinita de layouts e efeitos para um menu de navegação. O limite é a sua imaginação!

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc...) diferentes através de CSS:

Abordarei neste tutorial a construção de dois menus verticais e uma barra de navegação.

Numa visão inicial mostro o menu em ação e a seguir apresento a folha de estilo e a marcação do código que faz o menu funcionar.

Caso você resolva copiar e colar os códigos, use os mostrados no tutorial, pois o do código fonte está adaptado para não conflitar com as estilizações do site e não funcionarão como mostrado.

Bons estudos.


1° - Os seletores de links

São quatro os seletores dos links

a:link define o estilo do link no estado inicial;
a:visited define o estilo do link visitado;
a:hover define o estilo do link quando passa-se o mouse sobre ele;
a:active define o estilo do link ativo (o que foi "clicado").

2° - Menus

Menu #1



Folha de Estilos do Menu

Código:

<style type="text/css">
#menuver {
width: 11em;
padding: 0;
margin: 0;
font: 12px Verdana, sans-serif;
background: #000;
border-top: 3px solid red;
border-bottom: 3px solid red;
}
#menuver li {
list-style: none;
margin: 0.5em 0 0.5em 0.5em;
}
#menuver li a {
margin:0;
padding:0;
text-decoration:none;
color: #fff;
}
#menuver li a:visited {
color: #fff;
}
#menuver li a:hover {
background: #fff;
color: #000;
}
#menuver li a:active {
background: #ccc;
color: #000;
}
</style>

Código HTML do Menu

Código:

<ul id="menuver">
<li>
<a href="#" title="Entrada no site">Home</a>
</li>
<li>
<a href="#" title="Área de tutorial CSS"
>CSS Tutorial</a>
</li>
<li>
<a href="#" title="Técnicas de layout com CSS"
>CSS Layout</a>
</li>
<li>
<a href="#" title="Técnicas de efeitos em links"
>CSS Links</a>
</li>
<li>
<a href="#" title="Construção de menus"
>CSS Menu</a>
</li>
<li>
<a href="#" title="CSS para impressão"
>CSS Print</a>
</li>
<li>
<a href="#" title="Importação de folhas de
 estilo">CSS @import</a>
</li>
<li>
<a href="#" title="Fale conosco">Contato</a>
</li>
</ul>

Menu #2



Nos browsers citados no menu anterior todas as renderizações se mostraram iguais.

Folha de estilos do menu

Código:

<style type="text/css">
#menubv {
width: 12em;
padding: 0;
margin: 0;
font: 14px Verdana, sans-serif;
}
#menubv ul {
list-style: none;
margin: 0;
padding: 0;
}
#menubv li {
border-bottom: 1px solid #f00;
margin: 0;
}
#menubv li a {
display: block;
padding: 5px 5px 5px 0.5em;
font-weight:bold;
border-left: 10px solid #ffc0cb;
border-right: 10px solid #fff5ee;
background-color: #ffe4e1;
color: #808000;
text-decoration: none;
}
#menubv li a:hover {
border-left: 10px solid #fcc;
border-right: 10px solid #fff;
background-color: #fff0f5;
color: #ccc;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menubv  li { float: left; height: 1%; }
* html ul#menubv  li a { height: 1%; }
/* End */
</style>

Código HTML do menu

Código:

<div id="menubv">
<ul id="menuver">
<li>
<a href="#" title="Entrada no site">Home</a>
</li>
<li>
<a href="#" title="Área de tutorial CSS"
>CSS Tutorial</a>
</li>
<li>
<a href="#" title="Técnicas de layout com CSS"
>CSS Layout</a>
</li>
<li>
<a href="#" title="Técnicas de efeitos em links"
>CSS Links</a>
</li>
<li>
<a href="#" title="Construção de menus"
>CSS Menu</a>
</li>
<li>
<a href="#" title="CSS para impressão"
>CSS Print</a>
</li>
<li>
<a href="#" title="Importação de folhas de
 estilo">CSS @import</a>
</li>
<li>
<a href="#" title="Fale conosco">Contato</a>
</li>
</ul>

----------