03/10/2012

Tutorial: Menu deslizante de 3

||

Hoje vou mostar como fazer um menu deslizante, bom ele não é exatamente um menu porque não é de colocar links mas sim texto mas não achei nome melhor para colocar. Ele e bem simples e levinho tenho certeza que ira amar.

Então vamos lá? Primeiro vá ate seu HTML e procure pela palavrinha <head> assim que o achar coloque esse codigo abaixo dele.

<!--- MENU DESLIZ-->
<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! E vá para o layout  agora adicione um gadget de HTML/Javascript e dentro dele isso

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

Agora é só arrumar o código e auto explicativo então e fácil de fazer

2 comentários:

  1. Muito legal esse tutorial, ameei!! Vou por no meu blog, só que com crédito!!

    ResponderExcluir
    Respostas
    1. Obrigada por gostar Giih, hihi esta certo. ^^

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram