Nenhum produto encontrado nessa seleção.
Criar um sistema de abas com CSS3 puro não é uma tarefa muito complicada, basta utilizarmos um input do tipo radio para simular a captura de clique do JavaScript com CSS (ou algo parecido). Em seguida, podemos utilizar os seletores de siblings (irmãos) para adicionarmos estilização aos elementos que queremos.
Vamos ver como isso funciona.
O HTML
Vamos criar um container para as nossas abas e adicionar o seguinte:
- Um input do tipo radio
- Um label para este input
- Um DIV (ou qualquer elemento que preferir) para o conteúdo da aba.
Veja:
<div class="tabs-container">
<!-- ABA 1 -->
<input type="radio" name="tabs" class="tabs" id="tab1" checked>
<label for="tab1">Aba 1</label>
<div>
Aba 1
</div>
</div>
Para cada aba, repita o processo (com exceção do container). Veja:
<div class="tabs-container">
<!-- ABA 1 -->
<input type="radio" name="tabs" class="tabs" id="tab1" checked>
<label for="tab1">Aba 1</label>
<div>
Aba 1
</div>
<!-- ABA 2 -->
<input type="radio" name="tabs" class="tabs" id="tab2">
<label for="tab2">Aba 2</label>
<div>
Aba 2
</div>
<!-- ABA 3 -->
<input type="radio" name="tabs" class="tabs" id="tab3">
<label for="tab3">Aba 3</label>
<div>
Aba 3
</div>
</div>Lembre-se de colocar um ID para cada input e trocar esse ID no atributo for do label.
O CSS
Para o CSS podemos fazer o seguinte:
/* Container das ABAS */
.tabs-container {
position: relative;
height: 360px;
max-width: 98%;
margin: 0 auto;
}
.tabs-container p {
margin: 0;
padding: 0;
}
.tabs-container:after {
content: '.';
display: block;
clear: both;
height: 0;
font-size: 0;
line-height: 0;
visibility: none;
}
/* ABAS */
input.tabs {
display: none;
}
input.tabs + label + div {
width: 98%;
opacity: 0;
position: absolute;
background: #eee;
top: 40px;
left: 0;
height: 300px;
padding: 10px;
z-index: -1;
transition: opacity ease-in-out .3s;
}
input.tabs:checked + label + div {
opacity: 1;
z-index: 1000;
}
/* Labels */
input.tabs + label {
line-height: 40px;
padding: 0 20px;
float: left;
background: #444;
color: #fff;
cursor: pointer;
transition: background ease-in-out .3s;
}
input.tabs:checked + label {
color: #000;
background: #eee;
}
O trecho acima está separado em partes, onde estilizamos o container, o conteúdo e os labels respectivamente.
É bastante simples e não há nada de JavaScript neste método.
Concluindo
Este é um método um pouco avançado e faz utilização de recursos modernos. Em meus testes, percebi que funciona em TODOS os navegadores atuais. Nos antigos, percebi que só funciona no IE9+ (não funciona no IE8).
Qualquer dúvida deixe um comentário.
