[CSS+HTML] Criando abas de forma simples

Olá Pessoal. Hoje vou apresentar um pequeno tutorial de criação de abas utilizando apenas HTML e CSS. O objetivo é trazer um exemplo simples que pode ser usado em projetos já existentes. Para este exemplo, nós vamos ter uma simples estrutura de abas em HTML e usando a propriedade de listas com a tag <ul> e 3 <li>.

1. Criando a estrutura HTML.

Primeiramente, temos o seguinte código HTML:

<!-- Criando a listagem -->
<ul class="abas">
    <!-- Aqui, criação da primeira aba -->
	<li class="aba" id="aba-1">
     <a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
	<li class="aba" id="aba-2">
     <a href="#aba-2">Aba 2</a> 
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
	<li class="aba" id="aba-3">
     <a href="#aba-3">Aba 3</a> 
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>

No bloco de código anterior, criamos uma lista com a tag <ul> com 3 opções, intituladas “Aba 1”, “Aba 2” e “Aba 3”. Repare que definimos classas para a <ul>. Para os itens da lista <li> além de classes, definimos um ID para cada um, que servirá para linkar as abas. Para os links, utilizando a técnica de âncoras (#nome-da-aba) sendo o mesmo ID de cada item da lista de abas.

2. Definindo o Estilo CSS

Após a criação da estrutura em HTML, precisamos definis as classes através do CSS. Criaremos portanto as seguintes classes:

.abas {
position: relative;
}
.aba {
display: inline;
}
.aba &amp;amp;amp;gt; a {
float: left;
padding: 0.5em 1em;
background: linear-gradient(#FFF, #EEE);
border-width: 1px;
border-style: solid;
border-color: #CCC #CCC #FFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.aba:not(:target) a {
border-bottom: 0 none;

}
.aba:target a, a:hover {
background: white;
}
.conteudo {
position: absolute;
left: 0;
top: calc(2em + 4px); /* altura do link + bordas */
z-index: -2;
border: 1px solid #CCC;
background-color: white;
}
.aba:target .conteudo {
z-index: -1;
}

Repare que definimos apenas classes. Os IDs que usamos no código HTML serviram apenas para utilizarmos as âncoras para serem o link de cada aba. Pronto, de forma simples temos o resultado final. A título de exemplo, criei uma pagina simples em HTML incorporando o CSS dentro da mesma. Vale lembrar que é aconselhável criar um arquivo CSS à parte em seu projeto, e adicionar o trecho de código HTML onde você precisar dentro da sua página web.

O código completo ficaria assim:

<!DOCTYPE html>
<html>
<head>
  <title>
    Criando Abas
  </title>
  <meta charset="UTF-8" />
<style type="text/css">
    .abas {
    position: relative;
    }
    .aba {
    display: inline;
    }
    .aba > a {
    float: left;
    padding: 0.5em 1em;
    background: linear-gradient(#FFF, #EEE);
    border-width: 1px;
    border-style: solid;
    border-color: #CCC #CCC #FFF;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    }
    .aba:not(:target) a {
    border-bottom: 0 none;
    }
    .aba:target a, a:hover {
    background: white;
    }
    .conteudo {
    position: absolute;
    left: 0;
    top: calc(2em + 4px); /* altura do link + bordas */
    z-index: -2;
    border: 1px solid #CCC;
    background-color: white;
    }
    .aba:target .conteudo {
    z-index: -1;
    }
  </style>

</head>
<body>
  <!-- Criando a listagem -->
<ul class="abas">
    <!-- Aqui, criação da primeira aba -->
	<li class="aba" id="aba-1">
     <a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
	<li class="aba" id="aba-2">
     <a href="#aba-2">Aba 2</a> 
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
	<li class="aba" id="aba-3">
     <a href="#aba-3">Aba 3</a> 
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>
</body>
</html>

O código-fonte completo você pode acessar pelo meu Github clicando aqui.

Espero ter ajudado você, até a próxima.

Anúncios

7 comentários sobre “[CSS+HTML] Criando abas de forma simples

  1. Boa tarde amigo, só um toque para vc, se quiser deixa seus codigos fontes mais bonitos, use as marcações:

    <span>your code here</span>
    

    O language, pode ser alterado para java, javascript, css, groovy,…
    []’s

    Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s