14 de jan. de 2013

Tutorial - Menu de Abas



Heey galera! 

Tudo jooia?

Começando com um dia chuvoso aqui, trago a vocês um menu muito simples e fofo de se fazer! Chama-se Menu de Abas. Vi em muitos blogs esse menu e achei como fazer no blog Be a Princess, então créditos pra lá! Vamos conferir?!

Preview: #####



Em seu HTML, procure por <head> e acima dele cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script src='http://static.tumblr.com/2wl9p6g/G70lj5t0q/animatedcollapse.js' type='text/javascript'/><script type='text/javascript'>animatedcollapse.addDiv(&#39;jason&#39;, &#39;fade=1,height=80px&#39;)animatedcollapse.addDiv(&#39;kelly&#39;, &#39;fade=1,height=100px&#39;)animatedcollapse.addDiv(&#39;michael&#39;, &#39;fade=1,height=120px&#39;)animatedcollapse.addDiv(&#39;cat&#39;, &#39;fade=0,speed=400,group=pets&#39;)animatedcollapse.addDiv(&#39;dog&#39;, &#39;fade=0,speed=400,group=pets,persist=1,hide=1&#39;)animatedcollapse.addDiv(&#39;rabbit&#39;, &#39;fade=0,speed=400,group=pets,hide=1&#39;)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 &quot;divobj.id&quot; to get its ID//state: &quot;block&quot; or &quot;none&quot;, depending on state}animatedcollapse.init()</script>
<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 para usá-lo, crie um gadget HTML/JavaScript, e nele cole:

<!-- Ínicio Menu Abas ~ By Be A Princess -->
<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 beoneprincess.blogspot.com -->
<center><br /> 
Explicando: Em Aba 1 coloque o nome do seu conteúdo que quer que apareça.
                     Em Conteúdo 1, cole o link do que você quer que apareça quando clicar.
E assim por diante....

Espero ter ajudado!

Beeijos



Digitado por: às está guardado em

2 comentários:

  1. Luana Neves14 de janeiro de 2013 às 12:35

    Já usei esse menu no template de encomenda é muitoobom!!
    Selena-adocicada.blogspot.com

    ResponderExcluir

Heey!! Se quiserem deixar o seu comentário, leia PLEASE aqui embaixo:

*Não xingue ninguém aqui! Seja educada(o)!
* Dúvidas, elogios e críticas são sempre bem-vindas!
* Leia toda a postagem, pois sempre faço com muito esforço e carinho pra vocês!
*Vou até o perfil de vocês para visitar e talvez até seguir o seu blog!

Obrigada por comentar!

Volte Sempre!

Assinar: Postar comentários (Atom)