terça-feira, 11 de setembro de 2012

Menu Deslizante - Jullye

ooi amores, esse tuto foi um pedido da minha maninha Ingrid ♥, mais antes do tuto queriia dar um avisinho, gente a 1° Edição da Revista jáh ta saindo, eu já fiz um post sobre a Revista, então vamo ao tuto.




Pra que não sabe oque é menu deslizante é isso aqui :



1- Vá em HTML (Modelo-Editar HTML) e abaixo de <head> cole o 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>

2- Salve e agora vá em Layout, adicione um gadget HTML/Javascript, e cole o código abaixo :


<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 estiver o nome titulo e o numero mude pelo titulo que você quer, e em conteudo do menu deslizante e o numero, mude pra oque você quer colocar.


                                                     Gostaram do Tuto ? Comenta !

1 comentários:

  1. Maninha obrigada por postar!
    Me ajudou mt, se eu usar, vou colocar créditos!
    Bjss

    ResponderExcluir