Menu em imagem com efeito hover

|
2310457787_8cbb4ebfea_large

Como foram muitos pedidos, eu tentei fazer esse tutorial o mais rápido possível para vocês. Todo mundo estava perguntando como eu fiz esse menu dos "extras" do cabeçalho, que é uma imagem, e quando passa o mouse em cima, aparece um texto. Você também pode ver a demonstração aqui neste blog e aqui abaixo:


O tutorial 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 Single Themes pela dica dos códigos. O tutorial está longo porque eu tentei explicar o máximo possível para vocês.

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 :)

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! rs Espero que tenha dado para entender direitinho. Se usarem, creditem.
Muito obrigada pelos elogios ao novo design do blog, fico muito feliz que tenham gostado!
Kissus, Liah

91 comentários

  1. A primeira a comentar! |o| HAHAHA'
    Amei o tutorial, estava pensando em fazer isso no meu blog :)
    Mas não sei se vai combinar com o design dele, enfim... muito bom!

    http://htmlteen.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. aff cara vai começa com isso denovo ¬¬

      Excluir
    2. Aff Anonimo, você também já está enchendo o saco do povo, se eles querem falar primeiro ou segundo, deixa falar ^^

      wwwvivinamoda.blogspot.com

      Excluir
  2. Segundo Comentario vou usar no Hamsters Awards

    ResponderExcluir
  3. Segundo Comentario vou usar no Hamsters Awards

    ResponderExcluir
  4. Nossa, só de olhar é complicado, mas com calma acho que sai, rs' Vou tentar fazer no próximo layout, achei o resultado lindo.
    Smach:3 | http://www.viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  5. Meeeu Deus :O
    Deu um nó na minha cabeça q
    Vou tentar fazer, vamos ver no que da u_u rs

    ResponderExcluir
  6. Amei o tutorial Liah, ficou muito bom! Parabéns ^^

    ResponderExcluir
  7. Mais uma vez salvando nossas vidas com seus tutoriais incríveis. Com certeza vou usar no novo layout ;D
    www.cute-bii.blogspot.com

    ResponderExcluir
  8. Amei o tutorial, Liah :D
    Visite:
    http://momamoraes.blogspot.com
    http://lilieneferreira.blogspot.com
    Bj Bj

    ResponderExcluir
  9. Nossa, muuuito complicado!
    mais, amei o tutu! eo designe!
    amoraazeda.blogspot.com

    ResponderExcluir
  10. Estou começando a entender algumas coisas de HTML, mas consegui entender todo o tutorial. Achei que você explicou super bem! Sem contar que o resultado fica lindo. Já estou planejando um novo lay pro meu blog, estou pensando em usar esse menu. Parabéns, ele fica ótimo :) Passe sempre no GQ, é uma honra te ver lá!

    Beijos,
    Anna
    http://garota-queen.blogspot.com/

    ResponderExcluir
  11. Amei! Já salvei nos meus favoritos por que com certeza quero usar no meu próximo layout!
    Parabéns, o blog está incrível, e o layout maravilhoso!
    Bezos~~>http://smileecherry.blogspot.com/

    ResponderExcluir
  12. Parece ser complicado =/ Mas se você ler com calma, fica bom, talvez no próximo design eu o faça o/

    Beijos ♥
    www.garotadeallstar.com

    ResponderExcluir
  13. Adorei o tutu,mas é bem complicado....
    eu estava super interessada para saber como você colocou o slide no cabeçalho.Faz um tutorial,por favor?Ou me manda o link?

    Beijos!

    mundoencantadodabarbie.blogspot.com

    ResponderExcluir
  14. nossa *--*
    Eu concerteza vou usar no meu próximo layout.
    bjoos

    http://mundoodasblogueiras.blogspot.com.br/

    ResponderExcluir
  15. Adorei! Mas achei meio complicado :/
    Pode ensinar como fazer os "News" do cabeçalho? Obrigada!
    imastoryne.blogspot.com

    ResponderExcluir
  16. Eu achei meio complicado de fazer, mas o efeito é lindo.

    magic--teens.blogspot.com.br

    ResponderExcluir
  17. Muito massa o tutorial. Usarei no próximo layout.
    http://blogger-boysattitudes.blogspot.com.br/

    ResponderExcluir
  18. Tuto rial grande,mais é apenas ter calma e paciência para tentar...
    lifeonalin.blogspot.com.br

    ResponderExcluir
  19. Ameeeei, assim que vi seu lay fiquei m perguntando como fazia, agora que eu vi o tuto fiquei super feeliz, super bem explicado! Beijinhos floor!

    Clique e navegue a vontade!Jaguars Edictions!

    ResponderExcluir
  20. Ai, pode deixar que eu te mostro o resultado sim! Sou apaixonada pelo CB, que blog mais perfeito. E além de tudo, você é uma blogueira muito simpática e carismática <3 Volte sempre no GQ, é uma honra te ver lá!

    Beijos,
    Anna
    http://garota-queen.blogspot.com/

    ResponderExcluir
  21. Esse menu de extras ficou mt show msm !! O tuto ficou bem explicado, só deve ser um pouco complicadinho de fazer, rss.
    Bjs, Stardolleiras

    ResponderExcluir
  22. Ameei! [apesar de ser meio complicadinho' hahah' ,
    Talvez eu use, não sei ainda, mas eu amei!
    Kissus,
    http://semprecomvoce2012.blogspot.com.br/

    ResponderExcluir
  23. Liah! Você se supero nhei ? nossa esse lay ta tão lindo quanto outro , se você ver o meu vai ri muiti pois tá muito feio ah:) Amo aqui sua linda :3
    --:http://smileretro.blogspot.com.br/

    ResponderExcluir
  24. Adorei o novo lay!ensina
    a fazer um manu daquele jeito? Pfzinho!

    ResponderExcluir
  25. Oi Liah ! Parabéns pelo blog ! amei o layout ! vim te chatiar um pouquinho kk bricadeira ! Vim pedi um tuto como fazer aquele slide no cabeçalho onde está NEWS ameei o novo layout !

    esquadraoedition.blogspot.com

    ResponderExcluir
  26. vou salvar o tutorial sei que vai dar muito jeito no futuro ^^
    Viver num T0 ❤

    ResponderExcluir
  27. Oi Liah, adorei o tuto, mas depois eu terei paciência pra poder fazer porque ele é muito grande e tal kkk! Será que eu poderia me inspirar nos seus tutos para fazer tutos para o meu blog??? Claro, colocarei creditos e tal, mas tem que pedir né? Se vocÊ deixar, me avisa la no blog tá.
    Bjs
    segredos-deumapoeta.blogspot.com

    ResponderExcluir
  28. Parece complicado (a parte da criação das imagens), mas eu vou tentar fazer. O tuto tá super explicadinho. =^.^=
    O novo template ficou lindo, que talento guria! Arrasou!! *-----*

    Beijos ;*

    ResponderExcluir
  29. é meio complicado hem! rs Tem como vc ensinar a como personalizar a area dos cometário do jeito que a gente quiser? rs

    ResponderExcluir
  30. Euu nn consigo instalar o photoshop CS5 portable me ajudaa liahh :( bjss.

    http://bombadeestilo.blogspot.com.br/

    ResponderExcluir
  31. Complicado em!! Acho que faço no próximo lay. Quem sabe.

    http://puro-gliter.blogspot.com.br/

    ResponderExcluir
  32. é um pouco trabalhoso, mas o resultado final vale muito a pena.

    Parabéns pelo novo layout acho que ele superou todos os antigos, e olha como todas eram lindos.

    ResponderExcluir
  33. parece ser complicado né ? ehehe , por isso que você demorou tanto.. pra ficar tão perfeito .. hahahah s2
    xoxo :*
    http://mini-fofoquinhas.blogspot.com.br/

    ResponderExcluir
  34. Liah, faz um video desse tutorial.. Seria mais facil de entender e voce iria ajudar bastante! Beijos;

    www.interligada-i.blogspot.com

    ResponderExcluir
  35. Liah, faz um video desse tutorial.. Seria mais facil de entender e voce iria ajudar bastante! Beijos;

    www.interligada-i.blogspot.com

    ResponderExcluir
  36. Ai Liah, esse menu é uma graça ameei muuuuuuuuuuito ele, talvez eu possa utilizar ele, sempre creditando é claro, aqui esta perfeeeeeeeeeeeeeeeeeeeeeito, lindo lindo demais esse lay <3

    Beeeeijos
    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  37. Ai Liah, esse menu é uma graça ameei muuuuuuuuuuito ele, talvez eu possa utilizar ele, sempre creditando é claro, aqui esta perfeeeeeeeeeeeeeeeeeeeeeito, lindo lindo demais esse lay <3

    Beeeeijos
    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  38. aaameeeeeeeeeeei! *-*, CARA o seu blog é ótimo xD

    http://kawaiitheworld.blogspot.com

    ResponderExcluir
  39. O blog tá lindo Liah, adorei o novo lay.
    E esse tuto ficou ótimo, bem grandinho heim rs, mas tá fácil de entender.
    Bjokas sz'
    www.jeitinhofemininoblog.com

    ResponderExcluir
  40. Adorei liah, seu blog ficou lindo!! Beijokas


    http://etilapriscila.blogspot.com.br/

    ResponderExcluir
  41. Vixi, eu não tenho paciência de fazer isso,kkk, mas deixa um desing bem legal no blog! Beijos!
    http://pqngarota.blogspot.com

    ResponderExcluir
  42. Adoro seus tutoriais :)

    www.teenlist.blogspot.com

    ResponderExcluir
  43. Eita bagulho complicado u3u
    Vou tentar, vai que sai alguma coisa? Se a preguiça não vier me perturbar -qq'

    Fica muito lindo o resultado, lembra o tumblr.

    Adorei :3
    Kisses <3

    ResponderExcluir
  44. Parece ser super complicado ;x
    Mas talvez, com muiita calma, eu consiga fazer, hahá.
    http://menina-do-sol.blogspot.com.br/

    ResponderExcluir
  45. Tem um espaço para clicar e dependendo de onde passa o mouse,da pra clicar,mais no meu blog não tá aparecendo as imagens...Eu até mostraria,mais tá fechado meu blog

    ResponderExcluir
  46. Que legal! O menu fica lindo assim, o blog fica parecendo aqueles fã-sites super chiques! Adorei o tutorial, realmente fiquei curiosa pra saber como faria!
    Tem post novo no TR! bjs
    http://blogtrashrock.blogspot.com.br/

    ResponderExcluir
  47. Liah podes encinar como colocar essa barra onde tem o titulo da publicação e o nome delas ?




    http//:loucasmaanias.blogspot.com

    ResponderExcluir
  48. Adorei o efeito! Bem bacana mesmo! Vou usar no próximo lay, claro!

    Banana-kiss!
    Rebel Cinderella

    ResponderExcluir
  49. É como eu disse antes, todos os seus lays são lindos esse não foi diferente. Está perfeito, tudo de verdade não estou falando da boca pra fora! Esse menu deu um toque "profissa" ;)

    Beijos♥

    carismaticaoficial.blogspot.com

    ResponderExcluir
  50. Que pena , só não apareceu a img , só apareceu o trem transparente"/ ajuda?

    ResponderExcluir
  51. Liah esse layout é o mais inspirador que você já fez, ele ta muito liiindo, cada detalhe fez a diferença, um dia eu ainda tenho a sua habilidade com HTML ;) Quando eu vi o layout pronto deu vontade de mudar o meu rss, ta muuuuuuuuuuuuuuuuuuuuuuuito perfeito *-----*
    kisses ^^

    ResponderExcluir
  52. Como faz ele subir devagar igual ao seu? Obrigada

    ResponderExcluir
  53. Adorei! Super bacana!
    http://um-guia-para-avida-das-garotas.blogspot.com.br/

    ResponderExcluir
  54. Ficou muito legal no seu blog eu acho pra eu fazer isso tá meio ruim mas eu tento não é? Ficou Kawaii.
    http://animesmaniabr.blogspot.com.br

    ResponderExcluir
  55. Adorei o tutorial,mais eu só tenho o photoscape e não dá pra fazer as imagens,vc poderia colocar alguma básicas,tipo home, parceiros e contato..? Só essas já seria muito útil "/

    ResponderExcluir
  56. Ótimo tutorial!!

    http://garotavertigem.blogspot.com/

    ResponderExcluir
  57. Adorei o tutorial!

    http://meumundoecompletamentepink.blogspot.com

    ResponderExcluir
  58. Muito util mas eu nao tenho pohotoshop :(!
    Bjs

    imperfectsmiles-nathi.blogspot.com

    ResponderExcluir
  59. Amore sera que você pode fazer um vídeo aula explicando direitinho que eu não conseguir de jeito nenhum me ajuda entra em contato com migo http://docecerejabruninha84.blogspot.com.br/

    ResponderExcluir
  60. Tentei "milhares" de tutoriais de menus com imagem, mas nunca funcionou, mas esse seu DEU CERTO! Muito bem explicado. Parabéns! Me será muito útil!

    ResponderExcluir
  61. hahahaha Deeeu muuuito ceerto " ee ficcou ótimo com as imagens que bolei aqui" Dáa uma olhada liah ? o blog ainda esta em construção mais em breve já estara no ar ! mais da uma olhada como esta ficando? " http://mundod-aluana.blogspot.com.br/ "

    ResponderExcluir
  62. Adorei o tutorial Liah !
    Pena que não consegui fazer. A imagem não apareceu. :/
    Bjus.

    ResponderExcluir
  63. Olá!!
    Ótimo tutorial (pra quem consegue hahaha)
    Eu queria saber como você fazer esse estilo ''fita'' no photoshop, eu já tentei de tudo!
    (eu não sei porque baixei ele hoje só pra tentar fazer isso)
    Por favor me ajuda!!
    Bjux;3

    http://countryofdreams-official.blogspot.com

    ResponderExcluir
  64. Ajudou muito, Liah! Sempre visito seu blog e foi o único lugar onde consegui aprender isto. Ainda não usei no meu blog (testei no blog de testes), pois fiz o lay dele recentemente, mas no próximo irei usar com certeza!

    http://fragososource.blogspot.com.br/

    ResponderExcluir
  65. O problema das imagens ficarem transparentes é por conta da hospedagem da imagem, tentem hospedar em outro lugar sem ser no tinypic ok, usem o tumblr ou o orkut, sei lá. :**

    ResponderExcluir
  66. Bom fiz a imagem, com o Phtoshop CS6, tudo certinho, mas ao editar o html está aparecendo a seguinte frase: Erro ao analisar XML, linha 6, coluna 31: The element type "img" must be terminated by the matching end-tag "". Poderia me ajudar por favor, gostei muito da postagem. Meu blog é http://www.youinsupernatural.com

    ResponderExcluir
  67. eu vou fazer o menu igual ao seu que está agora , só que ao contrário , a escrita e dai se passar o mouse a foto , obrigada pela dica

    ResponderExcluir
  68. é complicado, mas eu tô conseguindo :3
    (quando estiver pronto eu vou dar os créditos)

    ResponderExcluir
  69. buáaa fiz tudo certinho, revisei, mas no fim as imagens ficaram transparentes!!!!!

    ResponderExcluir
  70. Queria por esse tuto em prática, porém já tenho um parecido no meu blog e tambem estou apostando nos menus separados que nem antigamente, sem toda aquela frescura de menu no cabeçalho com tudo perfeito
    Talves eu esteja errada, mas é a vida né :/

    ResponderExcluir
  71. O meu não deu muito certo!
    Mas tenho certeza que fica lindo!
    Seu blog era a prova disso!
    Beeijos
    http://unhaseesmaltesdicas.blogspot.com.br

    ResponderExcluir
  72. Ótima dica :D

    http://dieseldivulgacoes.blogspot.com.br/

    ResponderExcluir
  73. Esta dica é realmente MUITO MUITO MUITO boa, mas a preguiça não deixa eu tentar fazer! Lol..
    http://pequenomundodosblogs.blogspot.com

    ResponderExcluir
  74. Nossa esse tutorial é muito bom!!
    Adorei quando eu ficar mais experiente com meu blog vou fazer este menu!!
    É que quase nem sei mexer com PhotoShop só com PhotoScape ;(
    Beijos Liah

    ResponderExcluir
  75. JESUS AMADO QUE COISA MAIS COMPLICADA! não teria uma forma mais simples, menos elaborada coisa simples mesmo!!! hehe

    ResponderExcluir
  76. nuss mt complicado, não consegui mais vou tentar novamente!!

    ResponderExcluir
  77. Nossa complicado demais na primeira vez não consegui mas eu não ia desistir ai na segunda vez ja consegui muitíssima obrigada seu blog esta de parabéns!

    ResponderExcluir
  78. Faz um tuto de como fazer um menu com submenus

    ResponderExcluir
  79. nn consegui... todo o código que eu coloquei no html apareceu acima do header do meu blog

    ResponderExcluir
  80. Adorei o Tutorial !
    http://odiariotvd.blogspot.com.br/

    ResponderExcluir
  81. Aeee, deu trabalho mas consegui shuashuashuahsa
    Vlw muito bom o tutorial : )

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...