Olá Giihs, O tutorial de hoje pode parecer meio complicado, mas acredite, deste jeito que eu estou ensinando é bem mais fácil do que de outras maneiras que você pode encontrar na internet. Agradeço muito ao Cherry Bomb pela dica dos códigos. O tutorial está longo porque eu tentei explicar o máximo possível para vocês.
Você também pode ver a demonstração aqui neste blog e aqui do lado:
A imagem
O primeiro passo é fazer a imagem do menu. Eu fiz um menu simples no photoshop para fazer este tutorial, que é o que está no blog de demonstrações. Ficou assim:
Essa a imagem do menu em estado normal. Iremos criar uma segunda imagem,
de como o menu vai ficar quando passar o mouse em cima. Só que essas
duas imagens tem que ficar juntas, uma em cima da outra para o menu
funcionar. Mas como faz isso? Eu explico!
Salve a primeira imagem (do menu normal) no formato png. Agora edite
essa mesma imagem, que ficou aberta no seu programa de edição (photoshop
ou photofiltre) com os efeitos do menu quando passar o mouse. No meu
caso, eu só aumentei a sombra dos links e ficou assim:
Salve essa imagem com um nome diferente da primeira imagem. Agora crie
uma nova imagem com a mesma largura da imagem do menu e com o dobro da
altura. Por exemplo, se o seu menu tem 78 pixels de altura, esta nova
imagem deve ter 156 pixels de altura (78+78=156).
Nesta nova imagem você vai colar primeiro, a imagem do menu normal, e
colocá-la na parte de baixo, depois cole a imagem do menu hover e
coloque-a logo acima, desse jeito :
 |
| Clique para ampliar |
É importante que elas fiquem exatamente na mesma posição, e que não haja
espaços entre uma e outra. Na minha imagem parece que tem espaço, mas
não tem, é por causa da sombra que ocupa alguns pixels.
Existem outros métodos para juntar as duas imagens, mas eu resolvi
explicar assim para que possa ser feito em qualquer editor de imagem.
Agora nos vamos dividir essa imagem em partes. Cada item do menu tem que
ficar em uma imagem separada, com seu estado normal e hover. No
photoshop você pode usar a ferramenta fatia (K) e depois que terminar,
clicar em salvar para a web. O programa salva automaticamente cada fatia
separada. Mas se você não tem o photoshop, pode selecionar cada parte,
copiar e colar em um novo documento. Desse jeito é mais difícil e pode
acontecer erros, já que não existe uma demarcação de onde termina uma
seleção e começa outra, por isso recomendo que baixe o photoshop.
Minha imagem fatiada ficou assim:
 |
| Clique para ampliar |
E depois de salva, cada link ficou em uma imagem:
Agora é só hospedar suas imagens em algum servidor na web e prosseguir para o próximo passo!
O código HMTL
Finalmente, os tão amados códigos ♥. Esse primeiro código você
vai colar onde quiser que o menu apareça. No caso do exemplo deste post,
o código foi colocado em gadget de HTML/Javascript abaixo do cabeçalho.
O código é o seguinte<a href="LINK_DO_ITEM"><img src="http://i49.tinypic.com/e5h5dt.jpg" height="METADE DA ALTURA DO ITEMpx" width="LARGURA DO ITEMpx" class="NOME DO ITEM"></a>
Você vai alterar apenas as partes destacadas do código. Em link do item você vai colocar o link que deseja que abra quando clicarem no primeiro nome. Em metade da altura do item,
você irá colocar a metade da altura das imagens do menu, ou seja aquele
primeiro número que você dobrou para fazer a imagem do menu completo.
No caso do meu menu a metade da altura é 78 pixels. Em largura do item,
você vai colocar a largura da imagem do primeiro item apenas. No meu
caso, a imagem que contém o link "Home" tem 212 pixels de largura. E por
último, em nome do item, coloque o nome do link, por exemplo, o
primeiro será "home", o segundo "sobre" e assim por diante.
Você vai repetir esse código para cada link do menu, então faça isso com bastante atenção. A única coisa que não vai mudar é a metade da largura do item, que é a mesma para todas as imagens. Quando terminar, salve o gadget. Ainda não vai aparecer nada no seu blog.
Código CSS
Agora é a segunda parte do código. Vá no html do seu blog, e cole o código abaixo antes de ]]></b:skin>
NOME DO ITEM { background: transparent url('IMAGEM DO ITEM') no-repeat bottom center; width: LARGURA DO ITEMpx; height: METADE DA ALTURA DO ITEMpx; margin-left: 0px; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;} .NOME DO ITEM:hover { background: transparent url('IMAGEM DO ITEM') no-repeat top center; width: LARGURA DO ITEMpx; height: METADE DA ALTURA DO ITEMpx; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
Atualizado: Agora tem o código para a transição ficar lenta que nem aqui :)
No gadget:
<a href="www.cherry-liah.blogspot.com"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" height="78px" width="212px" class="home" /></a>
<a href="http://cherry-liah.blogspot.com/p/sobre.html"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" height="78px" width="121px" class="sobre" /></a>
No HTML do blog:
.home {
background: transparent url('http://i48.tinypic.com/117zerk.jpg') no-repeat bottom center;
width: 212px;
height: 78px;
margin-left: 0px;}
.home:hover {
background: transparent url('http://i48.tinypic.com/117zerk.jpg') no-repeat top center;
width: 212px;
height: 78px;}
.sobre {
background: transparent url('http://i49.tinypic.com/259aicl.jpg') no-repeat bottom center;
width: 121px;
height: 78px;
margin-left: -4px;}
.sobre:hover {
background: transparent url('http://i49.tinypic.com/259aicl.jpg') no-repeat top center;
width: 121px;
height: 78px;}
Visualize como ficou. Se estiver ficado meio desalinhado, faça o seguinte: Antes de ]]></b:skin> cole este código:
#menuimagem { width: Largura total do menupx; height: Altura do menupx; margin-bottom: -0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; } no código do gadget adicione <div id="menuimagem"> antes dos outros códigos e </div> ao final de todos os códigos.
Volte para o HTML e ajuste as margens até ficar tudo certinho!
Acabou! Ufa! rs Espero que tenha dado para entender direitinho. Se usarem, creditem.
Beijinhoos
Nenhum comentário:
Postar um comentário