Saiba como se faz: ..."Menu em Abas com CSS"..."Menu em abas deslizante com JQuery"
Autor: Edilene brandao da silva | Publicado: 2010-11-18T16:08:00-08:00


 fonte e créditos:http://www.mundoblogger.com.br/2010/04/menu-em-abas-com-css.html  

&nbsp;:::

"&nbsp; Com as novas técnicas em aplicações CSS3, podemos desenvolver vários  efeitos que antes só eram possíveis com o uso de javascript.
Usando  as propriedades CSS, é possível criar um menu em abas, sem o uso de  javascript, tal qual você pode conferir no artigo, onde eu ensino a  instalar um Menu em abas deslizante com JQuery.
Neste  tutorial você vai aprender a criar um menu em abas, usando apenas  aplicações CSS, sem nenhum arquivo javascript, de forma simples, rápida e  fácil."




DEMO

"&nbsp; Principais vantagens de usar o menu em abas apenas em CSS:

- É excelente para blogs que possuem muitos script, porque você não precisa se preocupar com conflitos de javascript.
- Funciona em todos os navegadores (é claro que no IEca pode ocorrer eventual problema, como de praxe, dependendo do template)."


1º passo: Definir os estilos:Vá  em "&nbsp;&nbsp; design"&nbsp; &gt;&gt; "&nbsp;&nbsp;&nbsp; Editar HTML", (não precisa clicar em 'Expandir  modelos de widgets'), e cole o seguinte código logo ACIMA da tag ]]&gt;&lt;/b:skin&gt;

/* Menu em Abas CSSTabs
--------------------------- */
#csstabs {
height: 280px;  / * altura total da área * //*&nbsp;títulos das abas */color: #000;border-top:1px solid #000;&nbsp;border-left:1px solid #000;border-right:1px solid #000;&nbsp;/* conteúdo das abas */border:1px solid #000;&nbsp;background-color: #ddd;height: 200px;&nbsp;/* altura total do conteúdo da aba 1 */background-color: #ddd;&nbsp;&nbsp;background-color: #ddd;color: #565A63;&nbsp;background-color: #E6EAF3;height: 200px;&nbsp;  /* altura total do conteúdo da aba 2 */&nbsp;background-color: #E6EAF3;color: #565A63;
margin:0 auto;
position:relative;
width: 100%;
}

#csstabs h3 {  

cursor: pointer;
display: block;
font-size: 15px;
font-weight: bold;
height: 25px;
margin: 0;
padding: 5px 5px 5px 5px;
text-align: left;



}
.tabcontent {   
display: block;
height: auto;
width:100%;
padding:15px 0 5px 0px;

}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
z-index: 0;
background:none;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
opacity: 0;
z-index: 0;
}

#tab1 .tabcontent {

position:absolute;
left:0;
top:35px;

z-index: 2;
}
#tab1 h3 {
left: 0;
position: absolute;
top: 0;
z-index: 3;

}

#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {


z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
opacity: 1;
z-index: 3;
}

#tab2 .tabcontent {


opacity: 0;
top:35px;
z-index: 1;
position:absolute;
}
#tab2 h3 {
left: 120px;
position: absolute;
top: 0;
}

#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {


z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
opacity: 1;
z-index: 3;
}
"&nbsp; No  código acima, algumas partes estão destacadas, pois estas deverão ser  editadas por você, como cores, bordas, largura e altura. Edite de acordo  com as medidas e cores de seu template. Vá editando e visualizando até  ficar da maneira que você quiser."

2º passo: Incluir o menu em abas no html do template:"&nbsp; O  Código HTML é muito simples e você poderá inclui-lo onde quiser,  inclusive na sidebar, que na minha opinião, é o melhor local para este  tipo de menu."


"&nbsp;&nbsp; Vá até 'Layout' → 'Elementos de página' → Clique em  'Adicionar um elemento de página'→ Escolha tipo 'HTML/Javascript' e cole  o seguinte código lá:


&lt;div id="csstabs"&gt;
 &lt;div id="tab1"&gt;
   &lt;h3&gt;TITULO ABA 1&lt;/h3&gt;
   &lt;div class="tabcontent"&gt;
     ....Coloque o conteúdo....
   &lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="tab2"&gt;
   &lt;h3&gt;TITULO ABA 2&lt;/h3&gt;
   &lt;div class="tabcontent"&gt;
     ....Coloque o conteúdo....
   &lt;/div&gt;
 &lt;/div&gt;


&lt;/div&gt;  

"&nbsp;&nbsp; Salve!"


"&nbsp; Agora é só inserir o conteúdo no local indicado no código, como Links, textos, imagens, ou o que você preferir.
Use a imaginação!"

Se quiser incluir outra aba basta incluir mais uma condicional no código:
&lt;div id="tab3"&gt;
   &lt;h3&gt;TITULO ABA 3&lt;/h3&gt;
   &lt;div class="tabcontent"&gt;
     ....Coloque o conteúdo....
   &lt;/div&gt;
 &lt;/div&gt;
"&nbsp; Para cada aba que quiser incluir é só sempre repetir este trecho e sempre colá-lo antes da última  &lt;/div&gt;  "
&nbsp;

"&nbsp; Mas  preste atenção nas medidas da sua sidebar, se incluir muita aba, pode  ser que o menu fique desconfigurado, não esqueça que você deve sempre  respeitar a largura total da sua sidebar."

fonte e créditos:http://www.mundoblogger.com.br/2010/04/menu-em-abas-com-css.html