Menu Deslizante


Esse menu é bem antiguinho, mas prá quem gosta de menu "oculto", ele é perfeito.

#Normal: conteúdo do menu oculto

#Ao Clicar: Conteúdo aparece

http://blogtestb13.blogspot.com.br/


 Faça sempre backup do seu template antes de modificá-lo , ou tenha um blog de testes, caso algo dê algo errado.

Vamos ao tuto:


Vá em modelo >> Editar HTML >> Aperte Ctrl+F e procure 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!

Vá em Layout => Adicionar um Gadget => HTML/JavaScript

Para o código funcionar:





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

*** Onde tem # você coloca o link da categoria

Créditos: Cherry Bomb

Nenhum comentário:

Postar um comentário