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!

Leia Mais

Efeito hover no cabeçalho, post e sidebar

Mamanunes perguntava no Twitter dia desses, como dar um efeito hover no cabeçalho da página, utilizando imagens. Para que você possa compreender logo de cara do que trata este tutorial, acesse este link do meu blog de testes e passe o cursor do mouse sobre o cabeçalho, post e títulos da sidebar. Mas adianto que se você insiste em usar o IE6, não verá nada acontecer, isto por que o IE6 suporta a pseudo-class :hover apenas para links, o que não é o caso deste tutorial.

Aliás, li por aí que o IE6 não suporta a Internet e achei a definição excelente. Eu realmente não entendo por que uma pessoa insiste em usar um navegador tão ultrapassado. O navegador é apenas uma ferramenta e quando uma ferramenta se torna antiquada tratamos de substituí-la. Não é por que o IE6 veio instalado em seu computador que você é obrigado a usar. Procure fazer o download de qualquer outro navegador: Internet Explore 7, Internet Explore 8, Firefox, Opera, Chrome...o que for. Eu já não me preocupo em fazer nada parecer bem no IE6 e me parece um contra-senso gritar 'Morte ao IE6' e continuar perdendo horas e horas (e muitas vezes dias) para que este navegador possa interpretar o que naturalmente não compreende. Por que se continuarmos a fazer tudo parecer 'normal' no IE6 como vamos convencer as pessoas a abandoná-lo?

Mas, voltando...
Para dar este efeito no cabeçalho, primeiro vou ensinar como colocar uma imagem no topo que atravesse todo o layout, de ponta a ponta, em qualquer resolução. Crie sua imagem (eu usei esta), coloque-a em um post do Blogger (depois salve como rascunho), copie o link da imagem clicando na aba Editar HTML (no editor de postagens) e coloque no seguinte trecho do código, como se apresenta em negrito:

body{
background: #212121 url(aqui o link da sua imagem) repeat-x top left;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

O valor #212121 representa a cor que se estende por toda a página, repeat-x faz com que a imagem se repita indefinidamente na horizontal e situar com top left garante que ela se repetirá a partir do topo à esquerda. Visualize a modificação e salve.
No exemplo que dou em meu blog de testes, eu retirei o cabeçalho para dar lugar a uma imagem onde se lê Título do Blog. Para retirar o cabeçalho, procure por este trecho (não precisa Expandir Modelo de Widget):

<b:widget id='Header1' locked='true' title='Efeito Hover (Cabeçalho)' type='Header'/>

substitua true por false e salve. Feita esta simples modificação você poderá mover o cabeçalho pela página, para a sidebar por exemplo, ou mesmo excluí-lo da página.
Depois de retirar o cabeçalho da página, crie uma imagem que deve aparecer no topo no estado 'normal', hospede como a anterior, copie o link e coloque neste trecho, como se apresenta:

#header-wrapper {
width:660px;
height:170px;
margin:0 auto 10px;
background: url(url da imagem aqui) no-repeat top center;
}

*Observe que a minha imagem para título tem a mesma altura da imagem usada em background e eu estipulei esta altura em height:170px; Para que sua imagem não fique afastada do topo do layout, retire todas as margens e paddings que possam distanciá-las. No caso do template Mínima (que foi usado neste teste), retirei o padding:10px de #Outer-wrapper, coloquei margin: 0px para #header e retirei a navbar.

Agora crie a imagem que deve aparecer no cabeçalho no estado hover (quando passa o cursor sobre ele), hospede, copie o link e acrescente este trecho logo abaixo do anterior:

#header-wrapper:hover{
background: url(url da imagem hover) no-repeat top center;}

perceba que eu posicionei da mesma maneira as duas imagens, no estado normal e hover: no-repeat top center.
É apenas isto. O efeito será interpretado por todos os navegadores, menos o IE6 como já expliquei.
Para dar este efeito no post, fiz o seguinte:

.post {
margin:.5em 0 1.5em;
background: #000a09;
padding:2.0em 0 1.5em;
text-align:justify;
color: #ccc
}

.post:hover{
background: #000a09 url(url da imagem) no-repeat top center;}

Basta acrescentar tudo o que está em negrito. No estado normal eu coloquei uma cor de fundo e no estado hover coloquei a cor mais a imagem que criei (com o fundo de mesma cor) e estipulei que ela não se repita e apareça no topo centralizada.

Para os títulos da sidebar.
No template Mínima não há especificações para o título da sidebar, por isso é preciso primeiro criá-las, desta maneira:

.sidebar h2{
margin: 0px;
padding: 15px 0px 10px;
text-align:center;
width: 260px;
height: 35px;
font-size: 18px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;
border-bottom:1px dotted $bordercolor;}

Todas as especificações descritas podem e devem ser mudadas ao gosto de cada um, estou apenas mostrando o que usei no meu exemplo. Para o estado hover usei:

.sidebar h2:hover{
background: url(url da imagem) no-repeat top left;color: #000;}

Observe que neste caso em particular eu não estabeleci nenhum background para os títulos no estado normal, aproveitei apenas a cor da página (que coloquei antes do link da imagem usada em body, lembra?). Neste caso a propriedade background aparece apenas no estado hover.

Leia Mais