Menu CSS com rollover de imagem

Publicado em: 09/02/2004

A técnica mostrada neste tutorial está ultrapassada. Para atualização consulte este tutorial

Finalidade

Neste tutorial mostrarei como construir um menu com rollover de imagem usando CSS puro.

O menu a construir é este abaixo mostrado. Passe o mouse sobre os links para ver o efeito.

Como você já deve ter observado o menu tem as seguintes características:

1. é constituído por seis links;
2. os links têm uma imagem de fundo e bordas;
3. no estado mouseover - quando passa-se o mouse sobre o link - há uma troca de imagem de fundo (rollover);
4. A largura deste menu é igual a 180px.

As imagens de fundo

Abaixo as imagens de fundo que utilizei para obter o efeito rollover.

Aqui uma dica: ao construir suas imagens de fundo para usar em elementos por CSS, tenha em mente que o usuário poderá ter configurado seu browser para exibir tamanhos de letras grandes ou mesmo outras definições que podem vir a afetar as dimensões de projeto do elemento HTML com imagem de fundo.

Assim, dimensione suas imagens de fundo maiores que a caixa do bloco do elemento HTML para fornecer um espaço extra de imagem e evitar que a imagem se repita em um fundo maior que o de projeto!

Usaremos imagens com 280 x 55 bem exageradas de propósito, como mostradas a seguir:

fundo_1.gif - imagem no estado do link em repouso

fundo_2.gif - imagem no estado do link com o mouse em cima

Se você quiser treinar com estas imagens salve-as para seu HD. Clique botão esquerdo sobre a imagem e "Salvar Imagem Como..."

O elemento HTML (tag) para construção de menus:

Teoricamente qualquer elemento HTML (tag) 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 que maior flexibilidade, recursos, e facilidades propiciam a estilização é sem dúvida o elemento ul que define as listas não ordenadas nos documentos HTML.

Vantagens do uso do elemento ul

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

• 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 06 (seis) 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.

<ul>
<li>Home Page</li> 
<li>Portfolio</li>
<li>Equipe tecnica</li>
<li>Parceiros</li>
<li>Album de fotos</li>
<li>Fale conosco</li>
</ul>

O código HTML acima é renderizado no browser e apresentado da tela conforme mostrado abaixo:

• Home Page
• Portfolio
• Equipe tecnica
• Parceiros
• Album de fotos
• Fale conosco

Largura, portabilidade e especificidade do menu

Para assegurar ao projetista, total controle sobre o posicionamento da lista que contém o menu bem como garantirmos que as regras CSS para os elementos HTML que compõem o menu (lista ul eli e link a ) não afetem as listas e links porventura existentes em outros locais do documento, vamos enclausurar o nosso menu em uma dive declarar as regras CSS para esta div. Chamemos esta div de: #menu

E a primeira regra CSS para nosso menu:

#menu { 
position: absolute; 
left: ## px; /*posição à direita*/
top: ## px; /*posição abaixo*/
width: 180px; 
}

Nota: Esta regra CSS dá ao menu a portabilidade, isto significa que definindo os valores left e top, você coloca o menu exatamente onde quiser no documento e com a precisão de pixel!

Aqui você define também uma largura para a div. No caso, adotei igual a largura do menu que esta contido na div.

Posicionamento do menu

Observe no esquema mostrado abaixo a chave para posicionar o menu no documento:

As coordenadas para position:absolute tem origem no canto superior esquerdo.

TOP: distância para baixo;

LEFT: distância para a direita.

Caso você queira inserir o menu dentro uma célula de tabela ou posicioná-lo relative ou float, basta você alterar as propriedades na regra acima.

Os marcadores de listas

Como você observou no item O código HTML típico para um menu, o browser renderizou nossa lista com um "marcador de lista" (uma bolinha preta na frente de cada item da lista) e um recuo para o texto.

Precisamos criar uma regra CSS para eliminar o marcador de lista e o recuo do texto.

A propriedade CSS que controla o marcador das listas é: list-style-type

Não lembra? Se você não está seguro com as propriedades CSS das listas refresque sua memória lendo este tutorial.

Para remover o recuo do texto há um detalhe. Alguns browsers usam a propriedade margin e outros a propriedade padding para o recuo das listas!

(Ainda vai chegar o dia em que os fabricantes seguirão as web standards e todos usaremos e projetaremos seguindo uma só e universal norma e seremos mais felizes. E, os malditos bugs morrerão todos!)

Conclusão para nosso menu:

as regras CSS para ul são list-style-type:none; margin:0px; padding:0px;

#menu ul {
list-style-type: none; /*remove o marcador*/ 
margin: 0; /*remove o recuo IE e Opera*/ 
padding: 0; /*remove o recuo Mozilla e NN*/ 
font: bold 16px arial, helvetica, sans-serif;
}

Nota : Nesta regra CSS também definimos as características das letras que escolhemos para o menu.

Com mais esta regra CSS nossa lista será renderizada no browser conforme mostrado abaixo:

• Home Page
• Portfolio
• Equipe tecnica
• Parceiros
• Album de fotos
• Fale conosco

Estilizando o elemento <li>

O elemento li define cada uma das linhas que contém os links.

A regra CSS adicionada a este elemento controla a distância entre os links pela definição da propriedade margin.

Separamos os links na vertical definindo um margem inferior, conforme mostrado abaixo:

#menu li { margin-bottom:1px; }

Estilizando o elemento <a>

Dentro de li estão inseridos os elementos inline a;:

E aqui mais uma dica: Para fazer com que toda a área da caixa do link seja "clicável" devemos declarar display:block; Se omitirmos esta declaração, somente será "clicável" as letras que definem o link!

É aqui que definimos também todo o "visual" da área "clicável". Assim cores, bordas, imagens de fundo, espaçamentos (padding) e efeitos visuais em geral são aqui definidos.

A regra CSS para nosso menu é a abaixo mostrada:

#menu a {
display: block;
padding: 1px 0 1px 25px;
border: 1px solid #000000;
width: 180px;
background-color: #339966;
color: #FFFFFF;
text-decoration: none;
background-image: url(caminho/fundo_1.gif); 
voice-family: "\"}\"";  /*Box Model Hack*/
voice-family:inherit;
width:153px;
}
body>#menu a {width:153px;}

Notas:

1-) Cálculos do Box Model Hack

Hack= Largura - (padding-left + padding-right +
border-left + border-right)

Hack= 180 px - (25 px + 0px + 
1 px + 1px) = 180 px - 27 px = 153 
px

Saber mais sobre o Box Model Hack

2-) Observe que um padding esquerdo de 25px foi definido com a finalidade de se colocar o texto descritivo do link, a direita da figura da bolinha esquerda que tem no desenho do fundo!

Estilizando o elemento <a> para o estado mouse sobre

Finalmente a regra CSS para fazer o efeito rollover no link!

#menu a:hover { 
border: 1px solid #000000; 
background-color:#FFFF99; 
background-image: url(caminho/fundo_2.gif); 
color:#000000; 
}

Aqui "trocamos" o fundo (cor e imagem) e tambem a cor do texto descritivo do link para contrastar com o novo fundo.

Não há efeito de troca na borda! Se você quiser quiser trocar a borda no rollover, declare a nova borda nesta regra. Se não quiser, pode omitir a declaração nesta regra que a borda será herdada.

Estilizando a:visited e a:active

Deixamos a título de exercício a estilização dos estados "link visitado" e "link ativo".

Mas atenção: não esqueça que a ordem das declarações dos estados dos links determinam o efeito cascata. Esqueceu isto? Ordem de declaração dos links

Palavras finais

Este tutorial assim como os demais constantes do meu site visam a através de um exemplo prático mostrar as técnicas gerais de uso das CSS.

Estude! analise! faça mudanças nos códigos! pesquise! experimente! Não se limite a copiar e colar e você rapidinho vai descobrir as maravilhas das CSS e tornar-se um expert. Boa Sorte!