Menu em abas (ou blocos com abas) são bastante úteis para o seu layout. Com eles é possível dividir seu conteúdo por categoria, deixar o layout mais limpo e aprimorar a experiência do usuário em seu site.
Criar o menu em abas é ainda mais simples. Com um pouco de HTML, CSS e uma ajudinha do jQuery, serão apenas algumas linhas de código até você atingir o objetivo.
Código completo
Primeiramente, vou exibir o código completo, depois explico tudo em blocos.
O HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<div class="content">
<div class="tabs-content">
<div class="tabs-menu clearfix">
<ul>
<li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
<li><a href="#" data-tab="tab2">Ipsum</a></li>
<li><a href="#" data-tab="tab3">Dolor</a></li>
</ul>
</div> <!-- tabs-menu -->
<div class="tab1 tabs first-tab">
Conteúdo da aba 1
</div> <!-- .tab1 -->
<div class="tab2 tabs">
Conteúdo da aba 2
</div> <!-- .tab2 -->
<div class="tab3 tabs">
Conteúdo da aba 3
</div> <!-- .tab3 -->
</div> <!-- .tabs -->
</div> <!-- .content -->
|
O CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
/* Geral */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12px;
line-height: 1.5;
}
body {
background: #222222;
}
a:focus {
outline: none;
}
.content {
margin: 30px;
}
.clearfix:after {
content: '.';
height: 0;
font-size: 0;
line-height: 0;
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
}
/* Abas */
.tabs-content {
background: #eee;
font-family: sans-serif;
}
/* Menu das abas */
.tabs-menu {
background: #0074a2;
}
.tabs-menu ul {
list-style: none;
}
.tabs-menu ul li {
float: left;
}
.tabs-menu ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
background: #eee;
color: #000;
}
/* Conteúdo das abas */
.tabs {
display: none;
padding: 30px;
}
.first-tab {
display: block;
}
|
O jQuery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
jQuery(function($){
$('.tabs-menu ul li a').click(function(){
var a = $(this);
var active_tab_class = 'active-tab-menu';
var the_tab = '.' + a.attr('data-tab');
$('.tabs-menu ul li a').removeClass(active_tab_class);
a.addClass(active_tab_class);
$('.tabs-content .tabs').css({
'display' : 'none'
});
$(the_tab).show();
return false;
});
});
|
Vamos aos detalhes.
Explicação detalhada
Agora vou detalhar o que cada uma das partes do nosso código faz.
O HTML:
O elemento com classe “content” não faz nada em específico, é apenas um div que contém todo o nosso HTML.
1
2
3
|
<div class="content">
</div> <!-- .content -->
|
As tags “tabs-content” são o conteúdo das abas, portanto, podemos configurar uma cor de fundo, fonte e coisas do tipo utilizando CSS.
1
2
3
4
5
|
<div class="content">
<div class="tabs-content">
</div> <!-- .tabs -->
</div> <!-- .content -->
|
Os elementos “tabs-menu” será o menu das abas:
1
2
3
4
5
6
7
|
<div class="tabs-menu clearfix">
<ul>
<li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
<li><a href="#" data-tab="tab2">Ipsum</a></li>
<li><a href="#" data-tab="tab3">Dolor</a></li>
</ul>
</div> <!-- tabs-menu -->
|
A opção “data-tab” dos links indicará a classe da aba a ser exibida pelo jQuery.
As abas podem ter duas ou três classes, são elas:
- classe-da-aba – A classe que você escolher para sua aba
- tabs – Classe padrão de abas
- first-tab – A tag que será exibida por padrão
1
2
3
|
<div class="tab1 tabs first-tab">
</div>
|
O CSS
O CSS das abas é relativamente bem simples.
Configuramos a cor de fundo e a fonte:
1
2
3
4
5
6
|
/* Abas */
.tabs-content {
background: #eee;
font-family: sans-serif;
}
|
O menu das abas:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/* Menu das abas */
.tabs-menu {
background: #0074a2;
}
.tabs-menu ul {
list-style: none;
}
.tabs-menu ul li {
float: left;
}
.tabs-menu ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
background: #eee;
color: #000;
}
|
Este é um menu como qualquer outro. A classe active-tab-menu será ativada pelo jQuery.
Depois ocultamos todas as abas e mostramos apenas a principal:
1
2
3
4
5
6
7
8
|
/* Conteúdo das abas */
.tabs {
display: none;
padding: 30px;
}
.first-tab {
display: block;
}
|
O jQuery:
O jQuery faz o seguinte (veja nos comentários):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
// Inicia o jQuery
jQuery(function($){
// Captura o clique no link do menu das abas
$('.tabs-menu ul li a').click(function(){
/** Variáveis **/
// Configura o link clicado
var a = $(this);
// A classe da aba ativa
var active_tab_class = 'active-tab-menu';
// Captura o atributo data-tab e gera uma classe
var the_tab = '.' + a.attr('data-tab');
// Remove a classe de aba ativa de todas as abas
$('.tabs-menu ul li a').removeClass(active_tab_class);
// Adiciona a classe de aba ativa apenas no link clicado
a.addClass(active_tab_class);
// Adiciona um CSS para ocultar todas as abas
$('.tabs-content .tabs').css({
'display' : 'none'
});
// Mostra apenas a aba que queremos
$(the_tab).show();
// Não deixa o navegador atualizar a página
return false;
});
});
|
Nenhum comentário:
Postar um comentário