Técnicas de construção de menus

Publicado em: 09/03/2004

Neste tutorial abordarei as técnicas básicas para construção de menus utilizando CSS PURO.

O elemento HTML para construção de menus

Teoricamente qualquer elemento HTML capaz de descrever texto ( p, h1, h2, ..., ul, ol, etc...) poderá ser estilizado para construção de menus. No entanto, dentre todos eles, o elemento semanticamente correto e indicado e que maior flexibilidade, recursos e facilidades propiciam a estilização são sem dúvida aqueles elementos que definem as listas, quer sejam de definiçao dl, quer ordenadas ol quer ul que define as listas não ordenadas e que usaremos neste tutorial .

Vantagens do uso dos elementos de listas

O uso do elemento ul ou outro elemento de lista, na criação dos menus com CSS tem as principais vantagens listadas abaixo:

  • Quando renderizados sem CSS são consistentes;
  • no código HTML do menu você tem quatro elementos aninhados para aplicar estilos (quais sejam: div - ul - li e a) - isto aumenta a flexibilidade para estilizar;
  • os critérios de acessibilidade ao seu documento são mais consistentes - na visualização do documento sem a aplicação da folha de estilo o menu será exibido de uma forma bastante conveniente;
  • com uso de uma só propriedade CSS (a propriedade display) você altera o layout de menu (em disposição vertical) para barra de navegação (em disposição horizontal);
  • são facilmente expansíveis - acréscimo de itens no futuro, isto é novos links.

O código HTML típico para um menu

A seguir mostro o código HTML típico para a criação de um menu com 05 (cinco) links (adiante você verá que este código é válido para qualquer número de links, podendo ser adaptado a qualquer necessidade atual e previsão de expansão futura - tamanho do menu).Este código servirá de base para desenvolvermos todo o estudo proposto neste tutorial.

<div id="menu">
<ul>
<li>
<a href="caminho/arquivo1.html">Home</a>
</li>
<li>
<a href="caminho/arquivo2.html">Produto A</a>
</li>
<li><a href="caminho/arquivo3.html">Produto B</a>
</li>
<li><a href="caminho/arquivo4.html">Serviços</a>
</li>
<li>
<a href="caminho/arquivo5.html">Contacto</a>
</li>
</ul>
</div>

Este código HTML é processado pelo navegador e apresentado na tela do computador conforme figura abaixo:

Exibição na tela do elemento HTML ul do codigo acima

Com o código HTML pronto, nosso próximo passo é escrever uma folha de estilo em cascata capaz de dar a forma e o visual ao menu, para apresentá-lo na tela com as cores, efeitos e disposições do nosso projeto.

Na figura abaixo o projeto gráfico do nosso menu, conforme criado pelo webdesigner.

Nota: Não se trata de uma obra de arte sob o ponto de vista de design, mas a finalidade aqui e explorar os recursos do CSS :-)

Observe a figura e identifique os pontos marcados de 1 a 9:

Projeto gráfico do menu, aponta nove locais de estilização

  1. este é o elemento div com uma cor de fundo cinza claro;
  2. este é o elemento ul com uma cor de fundo preta;
  3. este é o elemento li com uma cor de fundo cinza escura;
  4. aqui um pequeno espaçamento entre os elementos li;
  5. estado mouse over, quando o mouse passa em cima do link, elemento a, em letra escura com fundo claro;
  6. uma borda no elemento div produzindo um efeito de baixo relevo;
  7. estado default do link (quando a página é carregada) elemento a em letra clara sob o fundo do elemento li;
  8. estado do link após ter sido visitado, elemento a em letra amarela clara sob o fundo do elemento li;
  9. uma borda no elemento ul produzindo um efeito de alto relevo.

Observe que neste gráfico fica bem caracterizado o aninhamento dos 04 (quatro) elementos HTML conforme foi citado no item "Vantagens do uso do elemento ul" acima.

As dimensões do menu e a identificação dos elementos HTML

Do projeto gráfico do menu já consolidado e com suas dimensões finais, identificamos os elementos HTML envolvidos e levantamos os dados para a estilização. Observe a figura abaixo:

Aponta os elementos HTML e espaçamentos no menu estilizado

A "caixa" mais exterior na cor cinza clara é o elemento div;

Seguem-se as "caixas" dos elementos ul (cor preta), li (cor cinza escura - 5 caixas) e a (contém os 5 textos dos links) - nesta sequência e aninhadas, e de acordo com o código HTML já visto anterioriormente e abaixo:

Os dados a seguir, retirados do projeto gráfico servirão de base para criarmos a folha de estilo:

  • O elemento div tem 120 pixels de largura e sua altura varia com o número de links inseridos no menu. Possui ainda uma borda que confere um efeito de baixo-relevo. Entre o elemento div e elemento ul há um espaçamento de 5 pixels;
  • O elemento ul tem uma borda que lhe confere um efeito de alto-relevo. Entre o elemento ul e elemento li há um espaçamento de 5 pixels;
  • O elemento a contém o texto havendo um espaçamento ao redor deste texto.

A regra de estilo para o elemento div:

Antes de começar a estilização do elemento div, vamos atribuir ID para o elemento. A div será menu e a sintaxe: #menu.

E as propriedades e valores css do elemento div são:

  • uma largura de 120px ====> width:120px;
  • um fundo cinza claro ====> background:#999999;
  • um espaçamento de 5px para ul

    (igual em toda volta)====> padding:5px;

  • uma borda simulando um efeito de

    baixo-relevo (inset)====> border:3px inset #cccccc.

#menu {
width:104px;
_width:120px; /* hack para IE */
background:#999999;
padding:5px;
border:3px inset #cccccc;
}

A aplicação dessa regra de estilo no elemento div resulta em exibição do menu no navegador, conforme mostrado na figura abaixo:

Menu com apenas a div estilizada!

A regra de estilo para o elemento ul:

As propriedades e valores css do elemento ul são:

  • uma largura de 110px ====> width:110px;
  • um fundo preto ====> background:#000000;
  • um espaçamento de 6px para li

    (igual em toda volta)====> padding:6px;

  • uma borda simulando um efeito de

    alto-relevo (outset) ====> border:3px outset #cccccc.

  • e aqui um macete: os navegadores quando renderizam listas reservam uma margem esquerda de 50px para os marcadores da lista. Como não queremos marcadores temos que eliminar a margem default declarando ====> margin:0px;
#menu ul {
widht:110px;
background: #000000;
padding:6px;
border:3px outset #ffffff;
margin:0;  					}

A aplicação das regras de estilo nos elementos div e ul resulta em exibição do menu no navegador, conforme mostrado na figura abaixo:

Menu com a div e a ul estilizada!

A regra de estilo para o elemento li

As propriedades e valores css do elemento li são:

  • vamos eliminar os marcadores de listas

    (as bolinhas pretas em cada item de lista )====> liste-style: none;

  • colocar um espaçamento em volta das tags <li>

    ( 5px à esquerda e à direita, 3px em cima e embaixo) ====> padding: 3px 5px;

  • uma fundo cinza escuro ====> color:#666666;
  • uma margem embaixo para obter espaço entre

    os itens da lista ====> margin-bottom:2px;

  • e a definição do tipo e tamanho de letra ====> font: 12px verdana, arial, helvetica sans-serif;
#menu li {
list-style: none;
padding:3px 5px;
background:#666666;
margin-bottom:2px;
font: 12px verdana, arial, helvetiva, sans-serif;
}

A aplicação das regras de estilo nos elementos div ul e li resulta em exibição do menu no navegador, conforme mostrado na figura abaixo:

Menu com  a div  a ul e a li estilizada!

Observe que faltando definir apenas, as regras para o elemento a, o nosso menu já assumiu o aspecto do projeto, exceto os links que estão com as cores e o sublinhado default:

A regra de estilo para o elemento a

Vamos estilizar três estados do link:

  • link inicial quando a página é carregada

    a: link, cor branca - sem sublinhado;

  • link visitado

    a: visited, cor beje - sem sublinhado;

  • link com o mouse em cima

    a: hover, cor preta - fundo branco;

  • link clicado

    a:active, não será estilizado!

#menu li a {
display:block;
color: #ffffff;
text-decoration: none;
}
#menu li a:visited {
color: #ffffcc;
}
#menu li a:hover {
color: #000000;
background-color:#ffffff;
}

O código completo do documento HTML com o menu:

Aqui completamos as regras de estilo para o menu. Abaixo o código da página:

<html>
<head>
<title>Menu -  CSS</title>
<meta http-equiv="...>
<style type="text/css">
#menu{
width:104px;
_width:120px; /* hack para IE */
background:#999999;
padding:5px;	
border:3px inset #cccccc;	
}
#menu ul{
widht:110px;
padding:6px;
margin:0;
background: #000;
border:3px outset #ffffff;
}
#menu li {	
list-style: none; 	
padding:3px 5px; 
background:#666666;
margin-bottom:2px;
font: 12px verdana, arial, helvetiva, sans-serif;	
}
#menu li a { 	
display:block;
color: #ffffff;	 
text-decoration: none; 
}
#menu li a:visited {	
color: #ffffcc;	
}
#menu li a:hover { 	
color: #000; 	
background-color:#fff;
} 
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="caminho/arquivo1.html">Home</a>
</li>
<li>
<a href="caminho/arquivo2.html">Produto A</a>
</li>
<li>
<a href="caminho/arquivo3.html">Produto B</a>
</li>
<li>
<a href="caminho/arquivo4.html">Servi&ccedil;os</a>
</li>
<li>
<a href="caminho/arquivo5.html">Contacto</a>
</li>
</ul>
</div>
</body>
</html>

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil