Menumania #1

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.