:::
" 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."
" 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 " design" >> " Editar HTML", (não precisa clicar em 'Expandir modelos de widgets'), e cole o seguinte código logo ACIMA da tag ]]></b:skin>
/* Menu em Abas CSSTabs
--------------------------- */
#csstabs {
height: 280px; / * altura total da área * //* títulos das abas */color: #000;border-top:1px solid #000; border-left:1px solid #000;border-right:1px solid #000; /* conteúdo das abas */border:1px solid #000; background-color: #ddd;height: 200px; /* altura total do conteúdo da aba 1 */background-color: #ddd; background-color: #ddd;color: #565A63; background-color: #E6EAF3;height: 200px; /* altura total do conteúdo da aba 2 */ 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;
}" 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:
" 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."" 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á:
<div id="csstabs">
<div id="tab1">
<h3>TITULO ABA 1</h3>
<div class="tabcontent">
....Coloque o conteúdo....
</div>
</div>
<div id="tab2">
<h3>TITULO ABA 2</h3>
<div class="tabcontent">
....Coloque o conteúdo....
</div>
</div>
</div> " Salve!"
" 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:
<div id="tab3">
<h3>TITULO ABA 3</h3>
<div class="tabcontent">
....Coloque o conteúdo....
</div>
</div>" Para cada aba que quiser incluir é só sempre repetir este trecho e sempre colá-lo antes da última </div> "
" 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:
Postagens
