Dispositivo de navegação tal como menu vertical ou barra de navegação horizontal é sem dúvida um componente de uma página Web que tem merecido grande atenção de desenvolvedores e designers e as possibilidades de construção e implementação destes dispositivos cobrem uma faixa que vai desde um agrupamento simples de links com seu comportamento padrão até sofisticados e interativos menus e barras.  

As CSS nada ficam a dever às demais técnicas de desenvolvimento e possibilitam grande flexibilidade na construção de menus e barras de navegação. O elemento HTML apropriado para a marcação é o elemento lista em suas três versões UL, OL e DL e a escolha de um deles é uma questão de avaliação das condições particulares a cada caso. Contudo não há exagero em afirmar que na grande maioria dos casos a escolha recai sobre o elemento UL.

Neste tutorial mostrarei o emprego das CSS para construir três tipos distintos de menu vertical e sua equivalente barra de navegação horizontal abordando os fundamentos da técnica, que se bem entendida possibilitará a construção de uma variedade sem limites de menus e barras.

Considerações gerais

Vamos combinar que para todas as variantes do menu, usaremos uma só marcação HTML, que é a mostrada a seguir.
Assim, não repetirei para cada caso a marcação HTML, mostrando apenas as regras CSS.
Todos os menus estão ativos no seu comportamento, isto é, não são imagens. Confira cada um deles, passando o mouse sobre os links.

<ul id="nav">
<li><a href="#">Link um</a></li>
<li><a href="#">Link dois</a></li>
<li><a href="#">Link tres</a></li>
<li><a href="#">Link quatro</a></li>
<li><a href="#">Link cinco</a></li>
</ul>

Exemplo 1

Navegação horizontal

• Link um
• Link dois
• Link tres
• Link quatro
• Link cinco

CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	font: 12px Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
#nav li {
	float: left;
	}
#nav li a, #nav li a:link {
	background: #333; 
	border-right: 1px solid #f90;
	color: #f90;
	text-decoration: none;
	padding: 3px 8px 6px 8px;
	display: block;
	}
#nav li a:hover {
	color: #000;
	padding: 3px 8px 3px 8px;
	border-bottom: 3px solid #f90;
	background: #ccc;
	}
	

Navegação vertical

• Link um
• Link dois
• Link tres
• Link quatro
• Link cinco

CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	width: 100px;
	font: 12px Arial, Helvetica, sans-serif;
	list-style-type: none;
	border-left: 8px solid #f90; 
	background: #f90;
	}
* html #nav li {
	float: left;
	height: 1%;
	}
* html #nav li a { height: 1%; }

#nav li a, #nav li a:link {
	background: #333; 
	color: #f90;
	text-decoration: none; 
	margin-bottom: 1px;
	padding: 3px 0 6px 12px;
	display: block;
	}
#nav li a:hover {
	color: #000;
	padding: 6px 0 0 12px;
	border-bottom: 3px solid #f90;
	background: #ccc;
	}
	

Exemplo 2

Navegação horizontal

• Link um
• Link dois
• Link tres
• Link quatro
• Link cinco

CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	width: 100%;
	font:   bold 12px Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
#nav li {
	float: left;
	}
#nav li a, #nav li a:link {
	background: #ddd;
	border-width: 1px;
	border-color: #ffe #aaab9c #ccc #fff;
	border-style: solid;
	color: #000;
	text-decoration: none;
	padding: 3px 12px;
	display: block;
	}
#nav li a:hover {
	color: #666;
	border-color: #aaab9c #fff #fff #ccc;
	background: #eee;
	}
	

Navegação vertical

• Link um
• Link dois
• Link tres
• Link quatro
• Link cinco

CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	width: 100px;
	font: bold 12px Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
* html #nav li {
	float: left;
	height: 1%;
	}
* html #nav li a { height: 1%; }

#nav li a, #nav li a:link {
	background: #ddd;
	border-width: 1px;
	border-color: #ffe #aaab9c #ccc #fff;
	border-style: solid;
	color: #000;
	text-decoration: none;
	padding: 3px 12px;
	display: block;
	}
#nav li a:hover {
	color: #666;
	border-color: #aaab9c #fff #fff #ccc;
	background: #eee;
	}
	

Exemplo 3

Navegação horizontal

• Link um
• Link dois
• Link tres
• Link quatro
• Link cinco

CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	font: 12px Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
#nav li {
	float: left;
	}
#nav li a, #nav li a:link {
	display: block;
	margin-right:6px;
	padding: 3px 12px;
	border-left: 6px solid #1958b7;
	border-right: 6px solid #508fc4;;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	}
#nav li a:hover {
	border-left: 6px solid #1c64d1;
	border-right: 6px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	}
	

Navegação vertical

• Link um
• Link dois
• Link tres
• Link quatro
• Link cinco

CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	width: 170px;
	font: 14px Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	background:#ffe;
	}
* html #nav li {
	float: left;
	height: 1%;
	}
* html #nav li a { height: 1%; }
#nav li a, #nav li a:link {
	display: block;
	padding: 5px;
	margin-bottom: 1px;
	border-left: 10px solid #1958b7;
	border-right: 10px solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	}
#nav li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	}
	

Nota final

O hack estrela (* html #nav li e * html #nav li a) para o Internet Explorer, usado nas folhas de estilo para o menu vertical, preferivelmente deverá ser servido via Comentários Condicionais.

Esta matéria foi publicada em: 2006-06-11 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/06/11/menumania-um/trackback no seu site.