16 setembro 2012

Menu em imagem com efeito hover.

Olá pessoal!Como estão?
Bom,hoje eu írei trocar o cabeçalho e fazer uns ajustes no blog,mas o designe será o mesmo,só írei mudar o cabeçalho e abaixar a silebar.
E sobre o meu que vou encinar á vocês hoje,é esse aqui:


Então,primeiro queria dar os créditos á uma blogueira chamada Liah e ao seu blog maravilhoso o Cherry Bomb.Já que essa postagem é muito grande,vocês vão ter que clicar em leia mais.
A imagem

A primeira coisa que vocês tem que fazer é a imagem do menu.A Liah fez um menu simples no PhotoShop para ela fazer esse 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 caso da Liah, ela só aumento 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.
  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 HTML

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 menu da Liah a metade da altura é 78 pixels. Em largura do item, você vai colocar a largura da imagem do primeiro item apenas.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 lá :)
 Esse código você também vai ter que repetir para cada item do menu. Em imagem do item, você vai colocar o link da imagem que foi hospedada. No restante dos campos, você deve colocar as mesmas informações que colocou no código anterior, principalmente o "nome do item" que deve ser o mesmo que você colocou no código anterior.  Em margin-left, você ajusta as margens caso as imagens fiquem com espaços de umas para as outras. Para facilitar o entendimento de vocês, vou colocar o exemplo do código pronto:

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;
}

 E 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!Espero que tenham gostado!
E agradeço pelas visitas que o blog está recebendo!
Beijos ^^



Nenhum comentário:

Postar um comentário