Banner propaganda da DevMedia - Cursos de desenvolvimento web

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>

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo