Menu com imagens e efeito hover

Procurando uma maneira de criar um menu com imagens individuais (um ícone para cada item da lista) com efeito hover, lembrei de um menu vertical que vi no blog Vagabundia que apresenta este bonito efeito. O que fiz foi estudar o código fonte, entender seu funcionamento e pedir ao JMiur (muito obrigada, de novo!) permissão para publicar este tutorial, que me foi solicitado tantas vezes.

Para que vocês entendem do que se trata, antes de continuar lendo, visitem este blog de testes e passem o cursor do mouse sobre cada item do menu (vertical e horizontal). Quebrei muito a cabeça tentando encontrar uma maneira limpa e eficaz de criar este efeito (e tudo o que conseguia era uma gambiarra feia e confusa) até me deparar com algo tão simples e, por que não dizer, óbvio! A idéia é criar uma imagem só, com o ícone para o estado inicial do link e outro para o estado hover e usar a propriedade background-position para definir quando um e outro deve aparecer.

As medidas a seguir se baseiam no exemplo em meu blog de testes:

1-Crie imagens .gif com fundo transparent de tamanho 64px x 106px e posicione os ícones da maneira que se segue:

2-Faça uma imagem neste modelo para cada item do menu;
3-Hospede as imagens, copie a url de cada um e no CSS do código do template (acima de ]]></b:skin>) coloque este código que corresponde à cada link do menu:

a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(url da primeira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m1:hover {background-position: left bottom;}

a#m2, a#m2:link, a#m2:visited, a#m2:active {
background: transparent url(url da segunda imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m2:hover {background-position: left bottom;}

a#m3, a#m3:link, a#m3:visited, a#m3:active {
background: transparent url(url da terceira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m3:hover {background-position: left bottom;}

a#m4, a#m4:link, a#m4:visited, a#m4:active {
background: transparent url(url da quarta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m4:hover {background-position: left bottom;}

a#m5, a#m5:link, a#m5:visited, a#m5:active {
background: transparent url(url da quinta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m5:hover {background-position: left bottom;}

a#m6, a#m6:link, a#m6:visited, a#m6:active {
background: transparent url(url da sexta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m6:hover {background-position: left bottom;}

Para tantos forem os itens do menu, acrescente o trecho:

a#m6, a#m6:link, a#m6:visited, a#m6:active {
background: transparent url(link da sexta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m6:hover {background-position: left bottom;}

Note que atribuímos uma ID para os links que compõem o menu e que, nas palavras do mestre Maujor: id deve ser única, isto é, um e somente um elemento ou seletor deve estar identificado com determinada id. Por isso, ao acrescentar novos links à sua lista, você deve criar uma nova ID (nome), ou seja, à partir de #m6 deve se seguir #m7 ou qualquer outro nome que seja único e exclusivo.

Para que você entenda o que está fazendo (e não simplesmente copie e cole sem conseguir criar variações ao seu gosto), vejamos:

a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(link da primeira imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}
a#m1:hover {background-position: left bottom;}

em vermelho atribuimos um identificador ID para o elemento a (link), no caso #m1;
em background definimos que nos estados a:link, a:visited e a:active a imagem apareça no topo à esquerda. Como definimos uma altura e largura para a área 'clicável' (com height e width) impedimos que o restante da imagem apareça (lembre que a imagem original tem height:106px). Ou seja, o que excede a altura de 54px não aparecerá. Veja na imagem abaixo:

Para o estado hover a posição do background muda para left bottom (em laranja) e agora o que fica escondido é a parte superior da imagem, novamente limitada pela altura estabelecida para a área do link. Veja:

Um truque simples e genial que não sofre incompatibilidade de navegadores e não causa nenhuma dor de cabeça. Enfim, algo que não fui capaz de pensar :)

Agora, para criar um menu horizontal onde os links aparecerão, acrescente também no CSS:

#navigation{
height:50px; /*altura do menu*/
width: 600px; /*área total ocupada pelo menu*/
margin:0px auto; /*margin que centraliza o menu na tela*/
background: url(http://i41.tinypic.com/690sux.jpg) no-repeat top left; /*imagem de fundo do menu*/
}

#navigation ul{
width: 400px; /*largura da área ocupada pelos ícones*/
margin: 0px auto 0; /*centralizando os ícones*/
padding: 0 0 0;
}

#navigation li{
float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/
margin-top:4px; /*margens dos ícones*/
list-style-type:none;
}

Salve as modificações. Agora no HTML do código, e aqui você escolhe onde aparecerá seu menu, acrescente:

<div id='navigation'>
<ul>
<li><a href='Link do Blog/' id='m1' title='Home'> </a></li>

<li><a href='Link 01/' id='m2' target='_blank' title='Download'> </a></li>

<li><a href='Link 02/' id='m3' target='_blank' title='Vídeos'> </a></li>

<li><a href='Link 03/' id='m4' target='_blank' title='MP3'>
</a></li>

<li><a href='Link 04/' id='m5' target='_blank' title='Feed'>
</a></li>

<li><a href='Link 05/' id='m6' rel='nofollow' target='_blank' title='Contato'> </a></li>

</ul>
</div>

No caso do meu exemplo eu acrescentei o código dentro do cabeçalho, assim:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Menu Hover (Cabeçalho)' type='Header'/>
</b:section>

Aqui o código do menu

</div>

Mas você pode colocar acima ou abaixo de header,como queira. Para colocar verticalmente na sidebar, basta copiar o HTML à partir de <ul> até </ul> ,abrir um elemento de página HTML/JavaScript e colar o código.

Recapitulando:

• crie uma ID para cada link da lista;
• crie uma imagem com o dobro da altura determinada para a área de cada link, contendo as imagens para o estador inicial e hover do link.
• acrescente os links em um menu
  

Espero que gostem e principalmente, que tenham compreendido o procedimento. Sei que muitas pessoas que entendem de CSS e HTML podem achar que me estendo demais nas explicações - pois para eles basta bater os olhos no código para perceber o funcionamento - mas este blog foi criado para ajudar o usuário comum do blogger que deseja apenas dar uma incrementada no visual de sua página, não sendo portanto, profundo conhecedor de CSS e HTML. Minha intenção também não é apenas distribuir códigos que podem facilmente ser copiados e colados. Quero mesmo que entendam o que estão fazendo para que possam criar livremente. E como também não sou profunda conhecedora de nada e me defino sempre apenas como alguém muito xereta :) agradeceria muito qualquer correção que possa ser feita à minha explicação.

Evite punições do Google criando conteúdo duplicado: não copiei este tutorial, indique!