Faça um menu com imagens e rollover

Tutorial Atualizado! Pessoal, me desculpem! Cometi alguns erros nos códigos. Sabem como é, né? Herrar é umano. Se você não conseguiu fazer o menu, por favor, releia o tutorial.

Muita gente tem me perguntado como eu fiz o menu do Menina Nerd. Bom, eu aprendi nesse site. É um pouquinho complicado e por isso eu vou tentar recriar o tutorial para ficar mais fácil. Lembrem-se: o mérito é todo do site O Básico da Web. Vamos lá:

1.  A imagem:

( Clique para Ampliar )

Ela deve ser o menu inteiro. Alinhe direitinho as palavras uma de baixo da outra pra que dê tudo certo. Em cima faça a parte do menu "normal" ( sem o mouse por cima ) e embaixo, com o efeito que você quer que apareça quando o mouse fica por cima (que no caso do Menina Nerd aparece uma raíz). Não deixe nenhum espaço entre as duas partes.

2. O código 

Agora chega a parte chata, o código é imenso. Então, vamos por partes. Aconselho colar no word ou no bloco de notas para fazer as edições.

Código de todo o Menu :

#menu{
margin-top:0px;
position:relative;
width: LARGURA DA SUA IMAGEMpx;
height: ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
background: url(URL DA SUA IMAGEM) no-repeat 0 0;
}
#menu ul{
list-style:none;
text-indent:-9999em;
}
#menu li{
position:absolute;
top:0;
height:ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
}
#menu li a{
display:block;
text-decoration:none;
width:100%;
height:100%;
top:0;
}
#menu li a span{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
}

Foi aqui que eu errei! Portanto, repare somente ESSA PARTE! O erro foi tão pequeno que eu duvido que você descubra o que mudou =P HAHA Nas partes destacadas EM AZUL faça as modificações de acordo com a sua imagem. Logo depois cole o código para cada um dos links do menu : #um{ width: LARGURA DO ESPAÇO DO PRIMEIRO LINKpx; left:0; } #dois{ width: LARGURA DO ESPAÇO DO SEGUNDO LINKpx; left: MESMA LARGURA DO ESPAÇO DO PRIMEIRO LINKpx; } #tres{ width: LARGURA DO ESPAÇO DO TERCEIRO LINKpx; left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx; } #quatro{ width: LARGURA DO ESPAÇO DO QUARTO LINKpx; left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx; } #cinco{ width: LARGURA DO ESPAÇO DO QUINTO LINKpx; left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx; } #seis{  width: LARGURA DO ESPAÇO DO SEXTO LINKpx; left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx; }   Agora as coisas complicam um pouco. Como assim "largura do espaço do link"? É a largura do espaço do link, oras! Ok, palavras não são o meu forte. Deixe a imagem falar por mim: E por que somar os valores de width e left anterior?? Porque você tem que dar as coordenadas pra que cada link fique no lugar certo. O left é o espaço pra chegar em determinado link. Pensem: pra chegar no terceiro link, é preciso passar pelos dois primeiros, certo? Pois então! Temos que dar o valor desse espaço, e para isso é preciso a soma das larguras. Em vez de somar um por um, é mais fácil somar o width e left anterior. Tá Andreza, mas como eu vou saber a largura dos links? Bom, eu usei o PhotoScape pra descobrir isso ;) É só você simular o corte da área e ver o valor, olha: Não precisa ser necessariamente o PhotoScape, você pode usar outro editor que mostre esses valores (acho que todos mostram). Ah, e detalhe: eu coloquei seis links (#um, #dois, etc...) porque O MEU menu tem seis (início, o blog, etc...). Se o seu tiver mais ou menos links você apaga ou adiciona mais, ok? Vamos para o próximo código:

#um a span{
background:url (URL DA SUA IMAGEM) no-repeat 0 0;
}
#dois a span{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #dois{px 0;
}
#tres a span{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #tres{px 0;
}
#quatro a span{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #quatro{px 0;
}
#cinco a span{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #cinco{px 0;
}
#seis{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #seis{px 0;
}

Nessa parte eu acho que não pode ter nenhuma dúvida, né? Você só tem que substituir as partes EM AZUL colocando a url da sua imagem e colocando o valor de left de cada link correspondente. Ah, e NÃO RETIRE O SINAL NEGATIVO ( - ), ou o tracinho, sei lá.
Lembrando que se o seu menu tiver mais ou menos links, você deve apagar ou adicionar mais.
Aí vai a penúltima parte:

#menu ul li a:hover{
z-index:1000;
}
#um a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat 0 -ALTURA DO SEU MENUpx;
}
#dois a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #dois{px -ALTURA DO SEU MENUpx;
}
#tres a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #tres{px -ALTURA DO SEU MENUpx;
}
#quatro a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #quatro{px -ALTURA DO SEU MENUpx;
}
#cinco a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #cinco{px -ALTURA DO SEU MENUpx;
}
#seis a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #seis{px -ALTURA DO SEU MENUpx;
}

Esse código corresponde ao seu menu quando o mouse passar por cima. Acho que é por isso que tem tanta coisa pra alterar! Mas só as partes EM AZUL, hein? NÃO RETIRE O SINAL NEGATIVO ( - )! Ah, e na parte "altura do seu menu", você deve colocar o valor de metade da sua imagem. Já que ela está duplicada, lembra?

Depois de alterar todos esses códigos de acordo com o seu menu, vá em Design, depois em Editar HTML , dê Ctrl + F e procure por:

]]></b:skin>

E cole todo o código ANTES dele.

Agora, o último código:

<div id='menu'>
  <ul>
    <li id='um'><a href='ENDEREÇO DO 1º LINK'><span/>Primeiro link</a></li>
    <li id='dois'><a href='ENDEREÇO DO 2º LINK'><span/>Segundo link</a></li>
    <li id='tres'><a href='ENDEREÇO DO 3º LINK'><span/>Terceiro link</a></li>
    <li id='quatro'><a href='ENDEREÇO DO 4º LINK'><span/>Quarto link</a></li>
    <li id='cinco'><a href='ENDEREÇO DO 5º LINK'><span/>Quinto link</a></li>
    <li id='seis'><a href='ENDEREÇO DO 6º LINK'><span/>Sexto link</a></li>
  </ul>
</div>

Agora você só tem que colocar os endereços dos links, não esqueça de colocar o "http://".
O lugar onde você deve colocar esse último código depende do lugar onde você quer que o menu apareça. Meio óbvio, né?

Se quiser o seu menu ABAIXO do cabeçalho, vá em Design, Editar HTML e procure por:

<div id="Header-outer">

e procure o </div> dessa parte. Desculpem, mas eu acho que essa parte não é igual em todos os templates, no Menina Nerd o código é assim:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='false' title='Menina Nerd (Cabeçalho)' type='Header'/>

</b:section>

</div>

Ache o código parecido com esse, e cole logo DEPOIS dele só o último código.
Lembrando que o meu blog tem como base o Mínima...

Se você usa os novos templates do blogger, o código é diferente. Se quiser o menu ABAIXO do cabeçalho, procure por </header> e cole DEPOIS dele o último código.

E se quiser o menu ACIMA do cabeçalho, procure por <header> e cole Antes dele o último código.

Caso o menu não fique bem alinhado, altere o valor de margin-top que eu coloquei logo abaixo de #menu{

Bom, é isso. Espero que consigam! Sei que vai haver muitas dúvidas e por isso já vou deixando o meu msn: dre.za_oliveira@hotmail.com

Beeeijos.