Menus Sobrepostos com 8 Abas

Houveram alguns pedidos de como fazer mais menus em abas / sobrepostos além dos 4 que ensinei.

Não tem como fazer isso no site fonte de onde traduzi o tutorial, mas pela lógica eu o alterei e deu certo.
» Essas configurações são um pouco complicadas e demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.


Vamos lá:

Este código será para 8 ABAS:


1º Você deve copiar o código Javascript abaixo e colar acima da tag </head> do seu blog:

<script type="text/javascript">
/*Important Function to blend the tabs in and out*/
function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}
</script>

<script type="text/javascript">
/*Function for our Tabmenu with 8 Tabs*/
function swichtabs(wert) {
if (wert=='1'){
document.getElementById('tablink1').className='tab1 tabactive';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='2'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2 tabactive';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='3'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3 tabactive';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='4'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4 tabactive';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='5'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5 tabactive';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='6'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6 tabactive';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='7'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7 tabactive';
document.getElementById('tablink8').className='tab8';
}else if (wert=='8'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8 tabactive';
}
}
</script>
2º Coloque acima do código ]]></b:skin> na parte CSS do seu blog este código abaixo:
/*Example for a Menu Style*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold; position:relative;}


Este é o código CSS do menu onde você passa o mouse. Você pode alterá-lo da maneira que quiser. Também criar um CSS para o conteúdo.

O comando .menu li a.tabactive é aquele que se sobressai quando o mouse está em cima.

3º Copie e cole este código em uma widget que você criar na parte Elementos da página do seu blog e edite-o para os conteúdos e títulos.
Você pode também colar este código na parte html do seu blog na localização que quiser.
<!--Start of the Tabmenu -->
<div class="menu">
<ul>
<li><a class='tabactive' href='http://templatesparavoce.blogspot.com' id='tablink1' onclick='return true;' onmouseover='blendon("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("1");' title=''> TÍTULO 1 </a></li>

<li><a href='#' id='tablink2' onclick='return false;' onmouseover='blendon("tabcontent2"); blendoff("tabcontent1"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("2");' title=''> TÍTULO 2 </a></li>

<li><a href='#' id='tablink3' onclick='return false;' onmouseover='blendon("tabcontent3"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("3");' title=''> TÍTULO 3 </a></li>

<li><a href='#' id='tablink4' onclick='return false;' onmouseover='blendon("tabcontent4"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("4");' title=''> TÍTULO 4 </a></li>

<li><a href='#' id='tablink5' onclick='return false;' onmouseover='blendon("tabcontent5"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("5");' title=''> TÍTULO 5 </a></li>

<li><a href='#' id='tablink6' onclick='return false;' onmouseover='blendon("tabcontent6"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("6");' title=''> TÍTULO 6 </a></li>

<li><a href='#' id='tablink7' onclick='return false;' onmouseover='blendon("tabcontent7"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent6'); blendoff('tabcontent8'); swichtabs("7");' title=''> TÍTULO 7 </a></li>

<li><a href='#' id='tablink8' onclick='return false;' onmouseover='blendon("tabcontent8"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent6'); blendoff('tabcontent7'); swichtabs("8");' title=''> TÍTULO 8 </a></li>
</ul>
</div>
<!--End of the Tabmenu -->

<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
CONTEÚDO 1
</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div style="display:none;" id="tabcontent2">
CONTEÚDO 2
</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div style="display:none;" id="tabcontent3">
CONTEÚDO 3
</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div style="display:none;" id="tabcontent4">
CONTEÚDO 4
</div>
<!--End Tabcontent 4-->

<!--Start Tabcontent 5-->
<div style="display:none;" id="tabcontent5">
CONTEÚDO 5
</div>
<!--End Tabcontent 5-->
<!--Start Tabcontent 6-->
<div style="display:none;" id="tabcontent6">
CONTEÚDO 6
</div>
<!--End Tabcontent 6-->
<!--Start Tabcontent 7-->
<div style="display:none;" id="tabcontent7">
CONTEÚDO 7
</div>
<!--End Tabcontent 7-->
<!--Start Tabcontent 8-->
<div style="display:none;" id="tabcontent8">
CONTEÚDO 8
</div>
<!--End Tabcontent 8-->
VISUALIZE O MENU EM ABAS »AQUI

4º Edite onde está indicado:

Título 1, Título 2, Título 3, Título 4... → Coloque os títulos dos conteúdos do seu menu substituindo as palavras Titulo 1, Título 2 .....
Ex: Meu menu acima do lado direito: LiINKS, COMO INSTALAR OS TEMPLATES, DICAS e VALE UM CLICK.

CONTEÚDO 1, CONTEÚDO 2, CONTEÚDO 3, CONTEÚDO 4... → Coloque no lugar das palavras o conteúdo dos seus menus.
Exemplos:
·Em LINKS coloquei alguns links da seguinte forma:
Substituindo o Conteúdo 1
<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
<ul>
<li><a href="#"/>LINK</a></li>
</ul>
</div>
<!--End Tabcontent 1-->

No lugar de # coloque o endereço do link e em LINK o título. Repita esta linha quantos links quiser colocar.

·Em COMO INSTALAR OS TEMPLATES coloquei um texto com a explicação de como instalar os templates.

·Em DICAS coloquei links expandíveis (que já ensinei aqui no blog) e neles os links de sites que contém Dicas que acho importantes para blogs e edição de templates.

·Em VALE UM CLICK coloquei links de blogs amigos que contém conteúdo interessante e de qualidade.

►Para aqueles que entendem um pouco de linguagem CSS ficará bem mais fácil, para os que não entendem sugiro que estude um pouco principalmente para editar o aspecto do menu. Sugiro o site:
CSS para Webdesign
Menus Sobrepostos com 8 Abas Menus Sobrepostos com 8 Abas Reviewed by Áurea on 1/07/2008 Rating: 5

6 comentários:

  1. Ei Bruno,
    Amanhã explico isso ok! Você é estrangeiro? Escreve diferente?
    Abraços,

    ResponderExcluir
  2. XD! descupar ;D isso não entendi MENUS EM ABAS COM CLIQUE

    bjs!♥

    ResponderExcluir
  3. Olá Aurea,
    Usei seu html de menu de abas em meu blog.
    Fiquei mexendo nele, pois tentei fazer algo parecido com este blog para com o conteúdo, tipo links em blocos, barra de rolagem...mas não consegui aprender como fazer...
    Mexendo e mexendo cheguei até o ponto de que usei um código que funcionou para o que eu queria, ou seja, quando passo o mouse sobre os links da barra do menu, abre expande-se uma caixa abaixo como o conteúdo que coloquei. Consegui configurar as medidas para que ficasse exatamente abaixo de cada link específico...entretanto, funcionou somente no mozzila firefox esta configuração. No opera, e no internet explorer, a caixa não expande-se totalmente, mas sim somente um link aparece.
    Usei um cógido posiion: absolute, para que o conteúdo se expandisse da forma que queria...não sei se tem algo com isso o problema.

    Tem como consertar este bug somente para o internet explorer, e se possivel para o opera e outros.
    No firefox esta perfeito!
    Agradeço por qualquer ajuda ou dica.
    Meu blog: www.montanhadourada.org
    Gabriel

    ResponderExcluir
  4. Olá, esse código que está postado para esse menu está confuso e errado do geito que está. Tem como postar ele diferente para que ele aparece correto? Queria muito esse tipo de menu, mas infelizmente não consegui instalá-lo. Obrigado e parabéns pelos ótimos serviços prestados à nação blogueira.

    rosduz@gmail.com

    ResponderExcluir
  5. oi!adorei o menu,mas infeslimente ele não está funcionando! aplique certinho assim como o outro(de 4 abas, esse funcionou), apaguei o antigo e coloquei este(de 8 abas) mas infeslimente ele não funcionou!pode me ajudar?


    muito grato!

    ResponderExcluir
  6. oi adorei o blog! e o menu! mas fui testar com 8 abas e não funcionou! o de 4 sim! mas o com 8 não!?! pode me ajudar?



    muito grato !

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.