Voltar para o site

CSS Menu

Publicado em: 03/11/2003

Construção de menus

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.

Os seletores de links

São quatro os seletores dos links:

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

Menu #1

O menu em ação:

Screenshots do menu:

Renderização do menu no Internet Explorer 5 , no 6 e no Firefox

Folha de estilos do menu

#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; 
}

Código HTML do menu

<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

#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 */

Código HTML do menu

<div id="menubv">
...mesmo código do menu#1...
</ul>

Mais menu de navegação:
https://maujor.com/tutorial/menu_vert.php
https://maujor.com/tutorial/menurollimg.php

Barra de navegação

Nos browsers citados no menu#1 todas as renderizaçõos se mostraram iguais.

Nota: Retirei o link CSS @import deste exemplo para acomodar ao espaço disponível

Folha de estilos do menu

#menuhor {
border:none;
margin: 0;
font: 9px Arial, sans-serif;
}
#menuhor li {
list-style: none; 
margin: 0;
display: inline;
}
#menuhor li a {
height:1px; /* IE5.0 bug */
padding: 3px 1px; 
margin:0;
border: 1px solid #f00; 
background: #999;
text-decoration: none;
}
#menuhor li a:link {
color: #fff;
}
#menuhor li a:visited {
color: #fff;
}
#menuhor li a:hover {
background: #ccc;
color: #000; 
border-color: #000;
}

Código HTML do menu

<ul id="menuhor">
...mesmo código do menu#1...
</ul>

Mais barras de navegação:
https://maujor.com/tutorial/barNavCSS.php
https://maujor.com/tutorial/barrabotao.php

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo