Banner propaganda da DevMedia - Cursos de desenvolvimento web

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:

Imagem  a:link

fundo_1.gif - imagem no estado do link em repouso

Imagem para a:hover

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:

esquema de posicionamento do menu

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!

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