Script para criar um Menu Horizontal com Abas (Menu with Tabs) usando JavaScript e CSS. Ao clicar em qualquer aba o menu exibe o conteúdo sem precisar atualizar a página, criando um efeito dinâmico.

HTML

<!-- Cria o Menu -->
<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'first')" id="defaultOpen">Primeira</button>
  <button class="tablinks" onclick="openTab(event, 'second')">Segunda</button>
  <button class="tablinks" onclick="openTab(event, 'third')">Terceira</button>
</div>

<!-- Conteúdo da Primeira Aba -->
<div id="first" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>First Tab</h3>
  <p>Conteúdo da primeira aba...</p>
</div>

<!-- Conteúdo da Segunda Aba -->
<div id="second" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Second Tab</h3>
  <p>Conteúdo da segunda aba...</p> 
</div>

<!-- Conteúdo da Terceira Aba -->
<div id="third" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Third Tab</h3>
  <p>Conteúdo da terceira aba...</p>
</div>

Obs.: Em HTML o código &times exibe o sinal de multiplicação "X":

Para conhecer todas entidades HTML veja a tabela: Tabela de referência de entidades HTML

CSS

body {font-family: Arial;}

/* Style da aba (tab) */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style dos botões dentro da aba */
.tab button {
  background-color: inherit; /* cor do elemento pai */
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Muda a cor do fundo do botão on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Cria estilo da aba ativa/atual - tabalinks class */
.tab button.active {
  background-color: #ccc;
}

/* Estilo do conteúdo de cada aba */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Estilo do botão de fechamento "x" */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

/* Muda a cor botão de fechamento on hover */
.topright:hover {color: red;}

JavaScript

// pegar botão
var mybutton = document.getElementById("myBtn");

// quando rolar a página 20px do topo para baixo, o botão será exibido
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// // quando clicar no botão, a página rola para o topo do documento
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

EXEMPLO COMPLETO

No exemplo abaixo, clique em qualquer aba do menu para visualizar o conteúdo.

See the Pen Menu horizontal com abas by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi criado o botão "Scroll to Top". No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto.

Tente você mesmo »

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários