Menu Deslizante

Oiii meus xuxuzinhos marcianos tudo 'bão' com vocês? tomara que sim né, pq eu to ótima wiiiiiiiiiiiiiii 
esse tuto que vou postar do menu eu vi no Cherry Bomb, gostei e comecei a usar aqui no blog :) não ocupa espaço e é tri supimpa 
Ah..à pedido: Concurso rolando no blog Da Cabeça aos Pés participe clicando aqui

Vamos começar então?


   

#Normal: conteúdo do menu oculto
#Ao Clicar: Conteúdo aparece


Vá em Design > Editar HTML > aperte Ctrl F e pesquise por: <head>
abaixo da tag cole esse código

<!--- MENU DESLIZANTE -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>
</script>
<script type='text/javascript'>
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
 //$: Access to jQuery
 //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
 //state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

Visualize se tiver tudo ok, Salve!
Para o código funcionar vá em design > Adicionar um gadget > HTML/Javascript cole o seguinte código no Gadget ou onde você quer que apareça o menu


<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>
<div id="rabbit" style="display:none">
Conteúdo do menu deslizante 1</div>
<div id="dog" style="display:none">
Conteúdo do menu deslizante 2</div>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 3</div>

Pronto é só isso :)


23 comentários:

  1. Xuxuzinha Kaaakah eu estava louca para aprender como fazia esse efeito. És um anjo >w<

    Kisus >3<
    http://luka-megurine.blogspot.com.br/

    ResponderExcluir
  2. Nossa muito útil esse tuto, adoooorei
    Beeijos | Garotas de Fase

    ResponderExcluir
  3. Muito boa essa dica, é uma boa opção para organizar e economizar espaço...
    Gostei muito!
    Abç

    http://adraftbox.blogspot.com

    ResponderExcluir
  4. Ameei, fica super bonitinho e mais organizado! *-*
    Ótimo tutorial ^^ Vou ver se ponho no meu blog quando eu tiver um tempinho :)
    Beijoos ♥

    harajukucriativa.blogspot.com

    ResponderExcluir
  5. OMG \o/ Esse efeito é um sonho! Eu fico doidinha quando entro em um blog ausahsuh' Adoreeei s2 Bezões Luuh
    Rawr Girl ~> teenstyle.com

    ResponderExcluir
  6. Adorei o tutorial, o efeito é muito lindo!! Talvez eu use no meu, quem sabe né? hahaha <3
    www.viverserfeliz-renata.blogspot.com

    ResponderExcluir
  7. Primeira visita que fiz aqui, o seu blog é muuuito bom tem bastante conteúdo e tutoriais que eu adoro.
    Parabéns.

    Beijos♥

    http://makeielook.blogspot.com/

    ResponderExcluir
  8. oooooi amei seu blog ! Divinamente perfeito! kakaka!
    Seguindo aqui, dá uma passada no meu? comecei a pouco tempo, me ajuda? obrigadíssima, www.worldmagiic.blogspot.com

    ResponderExcluir
  9. Ah, seu blog é muito foofa, amei esse tutorial, é mt massa, e lindo.. seguindo aqui ^^ Beijos!

    http://www.blogmeninamulher.com/

    ResponderExcluir
  10. Adoreeei ! vou usar no meu proximo layout *-*
    Kisses ;*
    http://trechygirlss.blogspot.com.br/

    ResponderExcluir
  11. Seu blog é lindo de mais, foi você que fez o layout ? Tá lindooo *o*

    ResponderExcluir
  12. Aii flooor seu blog tá SHOOOW D+++ *--* briigada pelo o tutor tava que nem loka procurando este...mas nenhum explicava direiito '-' e o seu me saaalvoouu ^.^
    #Bezoocas--> - Sweet Cherry :3

    ResponderExcluir
  13. eu nao consegui você sabe diser se ele nao funciona no template espetacular do blog

    ResponderExcluir
  14. Arigatou Kaakah...
    Eu estava louca atras desse código!

    Kissus *3*
    http://coiisasdeotaku.blogspot.com

    ResponderExcluir
  15. Se eu quser usar esse estilo de menu numa página do meu blog, ele funciona?

    ResponderExcluir
  16. mas e se eu quiser add mais coisas no menu, tipo, mais de 3 coisas, eu só adiciono mais daqueles codigos ao código?

    ResponderExcluir