22.8.12

Tuto Menu Deslizante


Vá em Editar HTML >> Ctrl+F=  <head> e abaixo coloque o seguinte 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>
 


Salve as alterações!
Agora vá em 'layout'! Adicione um Gadget: HTML/JavaScript no lugar que você quer que o menu apareça e cole o código abaixo modificando os títulos e o conteúdo de cada link:


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


7 comentários:

  1. Gostei do post!
    Deixei um selinho para vc no meu blog!
    Bjs Ingrid (http://euziiinhas2.blogspot.com.br)

    ResponderExcluir
  2. adorei o post, o blog e as blogueiras, muito lindo e fofo aqui.

    Eu já estou seguindo aqui, linda. Poderia retribuir?

    http://runtothe-fashion.blogspot.com.br/
    ________________________________________________
    Meninas sigam meu blog se gostarem, eu retribuo o follow e estou disponível para parceiras, beijinhos para todas.

    http://runtothe-fashion.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Claro fofa vou retribuir sim , que bom que voce gostou do blog! =D

      Excluir
  3. Oi queridas, visitem meu blog, se gostarem e seguirem eu sigo de volta :)

    dezesseteinvernos.blogspot.com.br

    ResponderExcluir
  4. Oi amiga.. Tudo Bem? Tem um selinho + desafio pra você lá no meu blog... passa lá?! Agradeceria muito se você participa-se da brincadeira ♥ Link: http://docefuturo.blogspot.com.br/2012/08/desafio-selinho-do-df.html#more

    ResponderExcluir