Menu css com rollover de imagem, por Leonardo L Procopio

Creio que você já tenha lido o artigo anterior que escrevi, dando a base pra construção de um menu utilizando css. E agora vamos fazer pequenas alterações no nosso antigo código pra criar um efeito com imagem de fundo nos links.

Coisa simples, mas que quando bem empregado da um toque todo especial no projeto!

Eu não vou explicar como fiz a imagem porque não há mistério algum nisso, basta você utilizar algum editor gráfico e sair desenrolando.

E o grande truque da parada é o seguinte, nos temos duas imagens: 1 que vai empregada quando o link estiver normal sem nada, e outra que será acionada pelo estado hover (lembra? Quando o mouse estiver em cima... aquela parada!). Até ai tudo certo, 2 imagens e pronto!? Errado! Nós vamos colocar essas duas imagens uma abaixo da outra:

Ué Léo, porque vamos fazer isso se podemos colocar cada imagem através do background?

A resposta é bem simples, colocando uma imagem só assim, estamos ganhando em velocidade (e outras coisas!). Pois o navegador vai pegar somente uma no servidor.

Vou explicar como iremos fazer essa troca de uma pra outra!
Tu lembra que a largura (width) é de 170px e altura (height) é de 20px, e essa imagem, representando o primeiro fundo temos 170px de largura e 20px de altura, e a mesma coisa para o segundo fundo. Sendo assim nossa imagem final tem 170px de largura e 40px de altura (opa, to vendo alguém entendendo ai!!! Muito bom!!!).

Então, tudo vai ser uma questão de posicionamento! (isso mininu!). O background do link no seu estado normal (a) vai ser assim:

ul#menu li a {
width: 170px;
height: 18px;
display: block;
padding-top: 2px;
text-decoration: none;
color: #444;
font: 12px Verdana;
background: url(fundo2.gif) top left #f1f1f1;
text-align: center;
}

Notaram ali um top e depois left?! Então! Isso é a posição do background, ou seja onde ele vai aparecer em relação ao seu elemento! Ele vai exibir a imagem “fundo2.gif” começando pelo seu topo e esquerda, fazendo assim um recorte nela (pois o nosso link tem o tamanho de 170px por 20px).

Já vi que já estão até imaginando como vai ser o hover né!!!

ul#menu li a:hover {
text-decoration: underline;
color: black;
width: 170px;
font-weight: bold;
background: url(fundo2.gif) bottom left #fff;
}

Pronto! Ele diz pra carregar a imagem “fundo.gif” e exibi-la começando pela parte de baixo e esquerda! (caramba, é muito show!!!). E lembrando a vocês que o nosso hover também é 170px por 20px!

Entenderam a jogada?!

Opa, perai... o IE, ta arrumando algo?
Mas calma pessoal, eu só expliquei o funcionamento, assim todos irão saber o que estão fazendo! O código vem agora:

ul#menu li {
margin-bottom: 1px; /* essa margem na parte de baixo é pra dar uma separada */
}

ul#menu li a {
width: 170px;
height: 18px;
display: block; /* ele quem faz o li ser todo o link */
padding-top: 2px; /* da uma descolada do texto do link do topo */
text-decoration: none; /* retira o sublinhado do link */
color: #444;
font: 12px Verdana;
background: url(fundo2.gif) top left #f1f1f1; /* a cor eu coloquei pq tem pessoas q desativam o carregamento de img */
text-align: center; /* vô dizer nada em! */
}

ul#menu li a:hover {
text-decoration: underline; /* coloca o sublinhado no texto do link */
color: black;
width: 170px;
font-weight: bold;
background: url(fundo2.gif) bottom left #fff;
}
-->
</style>
<!--[if IE]>

ul#menu li {
margin-bottom: 0; /* o ie deu uma separada maior nos li, então aqui eu dou uma reduzida */
}

</style>
<![endif]-->

Não exige muita explicação esse código (não é preguiça não em!), pois seus comentários falam muito já!

e esse é o código do menu (que não estava aqui, pois tinha esquecido de colocar!!!)

<ul id=”menu”>
<li><a href=#>Principal</a></li>
<li><a href=#>Letras</a></li>
<li><a href=#>Marcha</a></li>
<li><a href=#>Contato</a></li>
<li><a href=#>Vale Tudo</a></li>
</ul>

Mas se tiver alguma duvida já sabe né!!!

Bom, agora você já tem mais uma base (e essa é bem legal em!). Comece a mudar a imagem, crie outras, adapte seu código, invente mais coisas, assim tu vai estar exercitando e aprendendo cada vez mais!

Grande abraço pessoal, e até o próximo!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
<!--
ul#menu {
list-style: none; /* retirando os marcadores */
margin: 0; /* retirando o recuo */
padding: 0; /* retirando o recuo */
width: 170px; /* preciso dizer? */
}

ul#menu li {
margin-bottom: 1px; /* essa margem na parte de baixo é pra dar uma separada */
}

ul#menu li {
margin-bottom: 0; /* o ie deu uma separada maior nos li, então aqui eu dou uma reduzida */
}

</style>
<![endif]-->
</head>
<body>
<ul id=”menu”>
<li><a href=#>Principal</a></li>
<li><a href=#>Letras</a></li>
<li><a href=#>Marcha</a></li>
<li><a href=#>Contato</a></li>
<li><a href=#>Vale Tudo</a></li>
</ul>
</body>
</html>

------------------------------------------------

msn: leonardomerce@hotmail.com

twitter.com/eek_

------------------------------------------------