, ,

Menu em abas com CSS e jQuery

Nenhum produto encontrado nessa seleção.

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.

Veja um exemplo do que vamos criar neste tutorial:

Então vamos lá.

Código completo

Primeiramente, vou exibir o código completo, depois explico tudo em blocos.

O HTML:

<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:

/* 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:

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.

<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.

<div class="content">
  <div class="tabs-content">

  </div> <!-- .tabs -->
</div> <!-- .content -->

Os elementos “tabs-menu” será o menu das abas:

<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
<div class="tab1 tabs first-tab">

</div>

 O CSS

O CSS das abas é relativamente bem simples.

Configuramos a cor de fundo e a fonte:

/* Abas */
.tabs-content {
  background: #eee;
  font-family: sans-serif;
}

O menu das abas:

/* 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:

/* Conteúdo das abas */
.tabs {
  display: none;
  padding: 30px;
}
.first-tab {
  display: block;
}

 O jQuery:

O jQuery faz o seguinte (veja nos comentários):

// 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;
  });
});

Veja uma demonstração aqui.

Em caso de dúvidas, basta perguntar.

/6 Comentários/por