Menus Sobrepostos com 4 Abas

Estive procurando este hack por muito tempo até que achei e já apliquei aqui no Templates.

» Vou ensinar aqui como fazer o do lado direito superior daqui do Templates onde você passa o mouse e aparece o conteúdo:
Encontrei este meu no site do Austríaco Jürgen Koller - Kollermedia.at
Este é o menu simples, lá tem outras opções de menus mais complexos que pretendo traduzir e postar aqui.
» Essas configurações são um pouco complicadas e demandam certo 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á:

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 4 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';
}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';
}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';
} 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';
}
}
</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.
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 href="#" class="tabactive" id="tablink1" onclick="return false;" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); 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'); 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'); 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'); swichtabs('4');" title="" >Título 4 </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-->

4º Edite onde está indicado:

Título 1, Título 2, Título 3 e 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 e 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.

Veja em TEMPLATES

·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 4 Abas Menus Sobrepostos com 4 Abas Reviewed by Áurea on 1/05/2008 Rating: 5

15 comentários:

  1. Uau!!!que legal Áu! hehehe (rimou tudo)
    Grande informação, vou usar. OBRIGAADA!
    Já troquei o seu button viu?
    beijos

    ResponderExcluir
  2. Áurea, gostei muito dessa dica, desde a primeira vez que vi seu menu me "apaixonei" por ele, procurei no seu blog, todavia, não tinha encontrado ainda, acho que por que não sabia o título ou você não tinha postado ela ainda. Coloquei a sua dica no meu blog, ficou bom, mas ficou um abaixo do outro, o seu é horizontal, como faço para que o meu também fique assim todos em uma só linha e bem abaixo do header? Acredito que você colocou o seu em alguma parte html, você poderia me dizer qual? Não precisa ensinar passo a passo para não lhe dá muito trabalho, me diga apenas que código devo encontrar para colocar e se devo colocar em baixo ou em cima do mesmo. Agradeço antecipadamente.
    Um abraço!

    ResponderExcluir
  3. Ariane vc esqueceu de explica como nóis colocamos a imagen exe: no vale 1 tem uma carinha nos link tem uns pezinhos vlw espero que vc ensineh Bjssss muitOOO boaaaaa essa sua dica ;D

    ResponderExcluir
  4. Como faço 7 obrigado ariane ameiii esse blog .

    ResponderExcluir
  5. Valeu Mama, Quero ver esta dica aplicada no seu blog!

    Pois é Gabriel, quando vi que você se interessa por assuntos financeiros e controle pensei em indicar o controleseudinheiro. Que bom que você gostou!

    Blog apenas para teste, você poderia me dizer qual é o endereço do seu blog para eu poder ver o que deu errado! Não consegui chegar até você assim!

    Olá Willian, vou trocar seu banner amanhã, estou entrando agora rapidinho, pois meu dia foi muito corrido.

    Nub Bruno, Sou a Áurea e não a Ariane, que é minha amiga e temos blogs com o mesmo assunto, sempre que posso indicá-la aqui faço com prazer. Vou colocar a dica para colocar os ícones não só no menu sobreposto, mas nos sidebars também! Logo logo! Aguenta só um pouquinho!

    Angelo, Sou a Áurea. Você quer colocar 7 menus sobrepostos, pretendo ensinar esta semana como fazer! Obrigada por seu comentário de ter gostado do Templates para Você!

    ResponderExcluir
  6. Aurea, genial este menu! Obrigada por traduzir o tuto. Eu já conhecia o site, mas estive por lá atras de backs e não ví os menus ...vou dar uma olhada. Menina, que confusão fazem com a gente! Outro dia um me encheu de agradecimentos pelo template que eu tinha feito e ele usava: fui ver e era seu rsrs. Dai avisei ele, olha, vai lá e agradece a Aurea...Dois dias depois ele voltou: coloquei seu banner, coloca o meu aí? Fui de novo olhar eo banner era seu! OMG! rsrsrs

    Bjs, excelente semana prá vc!

    ResponderExcluir
  7. Quero sabre como faz mais de 4 quero fazer 8 xD! :(

    obrigado pelas dicas auréa aqui eu de novo xD!

    ResponderExcluir
  8. Gostaria de sbare desa dica tbm como fazer mais de 4 obrigada Bjs!!!

    ResponderExcluir
  9. Tem como fazer mais de 4 sim Ana, estou escrevendo o post para colocar aqui!

    ResponderExcluir
  10. HOLA QUISIERA SABER COMO AUMENTAR EL MENU ABAS A 8
    O MAS

    ResponderExcluir
  11. Olá, eu queria se possivel saber como fazer esse menu abrir apenas quando eu clicar nas abas, e não quando o mouse passar. Obrigado.

    ResponderExcluir
  12. Oi Aurea, intalei o menu sobreposto com 4 abas no meu blog teste e deu certo, mas quando a passo para o meu ele até funciona, mas está dando conflito com o menu do sidebar, é como se ele juntasse os dois, tem como arrumar?

    Desde já obrigada!

    ResponderExcluir
  13. Aurea, consegui :D mas não foi esse menu foi o outro, é que coloquei fora do sidebar, no html estava dando erro, mas no widget deu certo... Mas se tiver uma solução para aparecer os dois menus sem confito no sidebar eu quero saber tá?

    Muito Obrigada!

    ResponderExcluir
  14. Eu segui o tutorial direitinho no meu blog de teste, mais quando passo o mouse nos menus, não sobrepõe, não passa os links é como se nem funcionasse. eu queria muito este menu, o que sera que deu errado? O script ta certinho ne?
    Bj Aurea aguardo

    ResponderExcluir
  15. Parecesse que o Jquery do script está com defeito, coloquei no meu blog, dentro na postagem para quando aparecesse a página da postagem, a postagem tinha que ficar dentro dela, e os outro menu não funfou.

    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.