14 de jul. de 2013

Menu Deslizante


Estou feliz <3 Estou fazendo muitas mudanças no meu dia-a-dia nessas férias. Já comecei a fazer abdominais para perder a barriguinha que esta começando a aparecer de tando eu ficar sentada usando o computador e vou começar a fazer caminhadas mesmo que eu tenha que ir sozinha, provavelmente eu também vá começar a fazer um tratamento dermatológico por que estou enchendo minha mãe para me levar em um e ela me disse que vai marcar, yay o/ Também estou tentando deixar o computador de lado um pouco e sair de casa pra sei lá, ver os parentes, vagabundear na rua e tal hehe

Faz tempo que não posto um tutorial para vocês então hoje eu trouxe um :3 Sim, estou procurando postar coisas não repetitivas para vocês até por que eu não gosto de blogueiras que fazem isso..O tutorial que eu peguei para hoje foi do Menu Deslizante do Cherry Bomb mas eu achei o tutorial no -Mixing, por isso, créditos aos dois blogs. Vamos lá??


Vá para seu HTML e procure pela tag <head> 
Depois que achar cole o seguinte código abaixo dela
<!--- 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>
Salve. Agora clique em Layout e adicione um gadget de HTML/Javascript aonde quer seu Menu e cole o seguinte código alterando-o de sua preferencia e o necessário
<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>

2 comentários: