quarta-feira, 5 de setembro de 2012

Tutorial: Hide menu com imagem

Tumblr_m8t0z2xq731rddfvto1_500_large
Hooy gente  á quanto tempo eu não postava um tutorial pra vocês né? -.- Pois bem, hoje eu criei vergonha na cara e vou ensinar a fazer um menu com um efeito super legal! 


Não caprichei na imagem -_- (risos) mais o principal objetivo foi alcançado (vocês viram como o menu funciona). 
Aah quem desenrola mais no HTML vai saber personalizar de olhos fechados e quem está começando agora não se preocupe que os códigos já dizem o que pode ser feito e se tiverem dúvidas é só comentar que eu ajudo ;D 

Clique em leia mais e confira o tutorial 


 Coloque o código abaixo ANTES de 



 Agora coloque o código abaixo ACIMA de 


Feito isso salve!

No local que você deseja que o menu apareça é só adicionar o seguinte código:



É isso vi no cor seletiva, espero que tenham gostado Mini gif 161 do tutorial de hoje... Bye Bye 

35 comentários :

  1. Amei Jackie.O efeito é bem fofo.

    desenrolaofficial.blogspot

    ResponderExcluir
  2. Que legal! Tava precisando de algo assim, acho que vou usar ^^

    ResponderExcluir
  3. Não dei conta :/

    http://biancasaless.blogspot.com.br
    @blogbiancasales
    http://www.facebook.com/biancasaless

    ResponderExcluir
  4. Ótimo tutorial Jackie, além de fácil e simples, economiza espaço. Adorei! *-*

    Beijos pra ti menina :*

    ResponderExcluir
  5. Amei o t uto, fica igual o teu menu é?
    BjoOO linda1

    ResponderExcluir
  6. Gostei do efeito, acho que vou usar no meu próximo lay.
    Participa do sorteio do meu blog? Jeito de Nerd(perfil)

    ResponderExcluir
  7. Cow domina os tutorias em uashuash
    Beeijos

    ResponderExcluir
  8. Fica muito legal e prático.bjs
    blogbondmais

    ResponderExcluir
  9. Caramba muito útil.
    Gostei, talvez eu use!
    Beijinhos Jackie

    Moda Passo a Passo -> Clique no perfil para ver

    ResponderExcluir
  10. Woooh *-* eu já sabia fazer isso, mas nunca tive a idea de fazer um menu assim xD
    De qualquer forma, adorei :D

    Torta de Menina

    ResponderExcluir
  11. Usava esse tutorial no meu outro blog ,só que ele travava ,era muito HTML que eu usava ,mas é super recomendável esse tuto :D

    http://quandochegardezoito.blogspot.com.br/

    ResponderExcluir
  12. Que ótimo tuto Jackie! Tava louca atráz de um menu desses *-*

    Bjos
    srtaindependencia.blogspot.com

    ResponderExcluir
  13. Jackie, como você colocou o menu na postagem?

    ResponderExcluir
  14. Ótimo tutorial, fica mesmo uma graça, até para colocar esses negocios de afiliados dá que fica lindo né?
    Bjos!
    Veja no meu perfil - Coisas de Meninas

    ResponderExcluir
  15. Gostei.da pra usar nos afiliados tambem né?

    Beijos flor^^

    ResponderExcluir
  16. Que lindo que fica *-*

    detalhesdaamooda.blogspot.com.br

    ResponderExcluir
  17. Adoreii vou botar isso no meu blog, ele esta em reforma...
    XOXO

    ResponderExcluir
  18. Esse menuzinho ajuda em tanta coisa! <3

    ResponderExcluir
  19. e novamente, a jackie nos surpreende com seus tutus MARAVILHOSOS <3'
    Bezoos :3

    ResponderExcluir
  20. Adorei o post e já fiz, :j:

    Só uma pergunta sobre parceiros, eu era parceira e agora não encontro a página deles, Foram todos retirados?

    ResponderExcluir
  21. Amei o tuto, super bem explicadinho, acho que vou usar no meu proximo lay.
    Beijos.

    Forest Daughter / Para acessar meu blog, vá em painel e depois em "abouts"

    ResponderExcluir
  22. OMG, isso de esconder as coisas via clique é tão mágicow *-*

    Just Debee

    ResponderExcluir
  23. ÓTIMO ^^ Eu tava mesmo a procura de um assim:)

    conectadas2.blogspot.com

    ResponderExcluir
  24. Hello , te indiquei pra um selinho veja:
    http://shinigamipower.blogspot.com.br/2012/09/tags-selinho.html

    ResponderExcluir
  25. Amei o tutorial Jackie, você domina em tutoriais! haha

    garota-delicadaa

    ResponderExcluir
  26. @D.T. Estão aqui>>http://isjackiezzdream.blogspot.com.br/p/blogroll.html

    ResponderExcluir
  27. @GIULIA AZEVEDO *-* Depois de instalar no template adicionei o ultimo código na área da postagem

    ResponderExcluir
  28. Gostei, faz tempo que não mexo mais nisso, vou ver se dou uma xeretadinha de novo!!!!

    ResponderExcluir
  29. Oii, pode me ajudar??
    Eu queria colocar o cabeçalho mais para a esquerda, mas eu não acho tutorial em lugar nenhum.
    Pode me indicar alguma coisa, ou fazer um post??
    Beigada :)
    Beijos
    www.funnydreaam.blogspot.com

    ResponderExcluir
  30. Demais! Acho Que vou tentar Agora Jack!! ^w^

    :h:

    gotasdecherry.blogspot.com.br

    ResponderExcluir
  31. Nossa que fácil! Super hiper mega FODA o efeito de menu! Ajuda para blogs que tem TROCENTOS menu e que não sabe mais enfiar nada no lay kkkkkkkk
    alem de é claro ficar super lindo ^^
    Ótimo tutorial *-*

    ResponderExcluir
  32. Adorei o código, mas quando eu tentei colocar numa página estática não deu certo. Quando eu clico na imagem não aparece os links escondidos. :a:

    @EricaMarts

    ResponderExcluir

.