Adolescente Nerd // Oficial: Três estilos de menu de Abas

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:

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



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

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

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



<center><br />

Espero que tenham gostado.

Créditos: ♥ ♥

Participe do Sorteio que está rolando aqui no blog.

Adolescente Nerd // Oficial

- ChapStique -

- Crouton -

- Nadaddy -

- Fatty -

- Hollywood -

8 de dezembro de 2012

Três estilos de menu de Abas

6 comentários: