01mai2012

Menu Deslizante

Guardado em:
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. ♣ ৸ Luka ৸ ♣2 de maio de 2012 às 06:13

    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. Thaís Nunes2 de maio de 2012 às 08:29

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

    ResponderExcluir
  3. Jason S. Krueguer2 de maio de 2012 às 12:15

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

    http://adraftbox.blogspot.com

    ResponderExcluir
  4. • Bibi ×2 de maio de 2012 às 12:33

    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. Kaakah ●ω● *Bad Reputation*2 de maio de 2012 às 16:39

    que bom que vcs gostaram ^-^

    ResponderExcluir
  6. Luuh Oliveira2 de maio de 2012 às 16:49

    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
  7. Bikoti2 de maio de 2012 às 19:34

    Otimo tutorial, adorei mesmo.
    #Bezos Rawr -----> www.Bikoti.blogspot.com.br

    ResponderExcluir
  8. Plum2 de maio de 2012 às 19:36

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

    ResponderExcluir
  9. Thaís Santana2 de maio de 2012 às 20:38

    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
  10. Lua de Menina2 de maio de 2012 às 21:54

    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
  11. Danny3 de maio de 2012 às 19:14

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

    http://www.blogmeninamulher.com/

    ResponderExcluir
  12. Sâmea Costa3 de maio de 2012 às 19:34

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

    ResponderExcluir
  13. Sâmea Costa3 de maio de 2012 às 19:35

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

    ResponderExcluir
  14. Isabel ™ ●ω● **Sweet Cherry**3 de maio de 2012 às 20:20

    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
  15. ESPAÇO CUT CUT27 de junho de 2012 às 12:22

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

    ResponderExcluir
  16. Sr. Megurine25 de agosto de 2012 às 01:17

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

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

    ResponderExcluir
  17. Dudinha14 de setembro de 2012 às 19:36

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

    ResponderExcluir
  18. Dudinha16 de setembro de 2012 às 11:31

    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

Assinar: Postar comentários (Atom)