• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

8 de dezembro de 2012

Três estilos de menu de Abas

Tumblr_mdlpmd1l1n1qfhcjmo2_500_large
Olá gente,
Quem aí não usa o menu de abas? impossível não usar né?! a moda de todos os blogs de agora é o menu de abas, mais para não ficar só nos mesmos menus de abas, trouxe dois estilos diferentes (o outro estilo é o tradicional
vamos ver?!
Procure por <head> e abaixo dele cole os códigos dos menus desejados:







<link href='http://naah-oliver.zip.net/menu3.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://poisonedapple.awardspace.us/tabber.js' type='text/javascript'/>

                             Se você escolheu esse, é só adicionar um gadget java/script e colar:


<!-- Ínicio Menu Abas ~ By Drikoti.Net -->
<div class="tabber">
<div class="tabbertab" title="Aba 1">
<br>
Conteúdo 1
</>
</div>
<div class="tabbertab" title="Aba 2">
<br />
Conteúdo 2
</div>
<div class="tabbertab" title="Aba 3">
<br />
Conteúdo 3
</div>
</div>
<!-- Fim Menu Abas ~ By Drikoti.Net -->
<center><br />


                               Se quiser adicionar mais uma aba é só colar antes do último </div> isso:


<div class="tabbertab" title="Aba 4">
<br />
Conteúdo 4
</div>



o segundo estilo é assim:
Aí quando você clica em um deles, o conteúdo vai deslizando, e assim sucessivamente, é muito bonito.
Esse é 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>
Se você escolheu esse, cole em um javascript:
<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>
e o outro é o tradicional que todos conhecem:
Esse é o seu código:
<link href='http://naah-oliver.zip.net/menu2.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://poisonedapple.awardspace.us/tabber.js' type='text/javascript'/>

E se você escolheu esse, cole esse código em um HTML/javascript:


<!-- Ínicio Menu Abas ~ By Drikoti.Net -->

<div class="tabber">
<div class="tabbertab" title="Aba 1">
<br>
Conteúdo 1
</>
</div>
<div class="tabbertab" title="Aba 2">
<br />
Conteúdo 2
</div>
<div class="tabbertab" title="Aba 3">
<br />
Conteúdo 3
</div>
</div>
<!-- Fim Menu Abas ~ By Drikoti.Net -->
<center><br />

                                                           Espero que tenham gostado.
Créditos:  
Participe do Sorteio que está rolando aqui no blog.

6 comentários:

  1. Quuue liindos! Vou usar! bj
    apenaas-uma

    ResponderExcluir
  2. Raw vou usar todinhos ♥ Acho eles muito perfeitos, e deixam o blog bem mais organizado ♥
    #May-Sun

    Nosso Diário Nada Convencional

    ResponderExcluir
  3. Awn mto fofos *U* posso pedir um tuto? assim tem blogs que no rodapé exibem "x recados" em vez de "x comentários" . Gostaria que ensinasse a fazer =^.^=

    geekegirlie.blogspot.com

    ResponderExcluir