Menu deslizante


Trago agora um tutorial de como colocar um menu com efeito deslizante, como este a seguir, no blog. Quer aprender? Vamos lá!



Vá em Design -> Editar HTML -> Aperte F3 ou Ctrl + F -> E procure por:
<head>
 Abaixo deste código, cole:
<!--- 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>
 E salve.

Agora vá em Design -> Adicionar um gadget -> HTML/Javascript -> E cole o seguinte código:
<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>
Em 'Título 1' '2' e '3' coloque os respectivos títulos.
Em 'Conteúdo do menu deslizante 1' '2' e '3' adicione o texto ou outra coisa qualquer, tipo o seu link-me. :)

Prontinho! Até que foi fácil, não foi? Beijos.

6 comentários:

  1. Adorei! Já salvei nos favoritos pra usar em um momento ~breve~, hahaha
    Ótimo post!
    Tá rolando sorteio lá no blog!
    Beijinhos :*

    www.PiinkCookie.blogspot.com

    ResponderExcluir
  2. Amei !! Muito fofo !! EU salvei no meu PC , rsrsrs

    Beijos , Dinti
    http://maniadegarotas2s2.blogspot.com.br/

    ResponderExcluir
  3. Aaa que fofoo!!!
    Salvei aqui pra usar depois!
    Adoro tutoriais! sou muito noob nessas coisas de HTML!
    Seguindo aqui!
    beijinhos!
    http://janainaricieri.blogspot.com.br/

    ResponderExcluir
  4. Menu bem fofinho :)
    http://plushrepublic.blogspot.com.br/

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +