Tab Nav Responsivo Com Html e Css

Tab Nav Responsivo Com Html e Css

Neste artigo vamos fazer uma tab de navegação, ou seja uma “Aba de Navegação” responsiva com css.

Vamos Adicionar o Html:

<div class="box-tab">
  
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1"><i class="icon icon-html5"></i> <span>Html5<span> </label>
    
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><i class="icon icon-css3"></i> <span>Css3<span> </label>
    
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><i class="icon icon-wordpress"></i> <span>WordPress<span> </label>
  
  
  <section class="box-content" id="content-1">
   
    <p>
      
       HTML5 (Hypertext Markup Language, versão 5) é uma linguagem de marcação para a World Wide Web e é uma tecnologia chave da Internet, originalmente proposto por Opera Software.<br><br> 
       É a quinta versão da linguagem HTML. Esta nova versão traz consigo importantes mudanças quanto ao …
   
    </p>
 
  </section>
    
  <section class="box-content" id="content-2">
   
    <p>
        CSS3 é a terceira mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), pela qual se define estilos para um projeto web (página de internet). Com efeitos de transição, imagem, imagem de fundo/background e outros, pode-se criar estilos únicos para seus … 
    </p>

  </section>
    
  <section class="box-content" id="content-3">

    <p>
      WordPress é um sistema livre e aberto de gestão de conteúdo para internet (do inglês: Content Management System - CMS), baseado em PHP com banco de dados MySQL, executado em um servidor interpretador, voltado principalmente para a criação de páginas eletrônicas (sites) e …
    </p>

  </section>
    
</div><!--Box-tab-->

Vamos Adicionar o css:

/*Tab Nav*/
.box-tab {

  width:100%;
  margin: 0 auto;
  background:#ffffff; 
  padding:10px;

}

.box-content {
  display: none;
  padding: 20px;
  border-top: 1px solid #ddd;
}

.box-content p {

  font-family: 'open_sanslight'; 
  font-size:1em;
  color:#6a6767;

}

.box-tab input {
  display: none;
}

.box-tab label {
  
  font-family: 'open_sansrbold'; 
  display: inline-block;
  margin: 0 0 -1px;
  padding: 10px 30px;
  text-align: center;
  color: #6a6767;
  border: 1px solid transparent;

}

.box-tab label:hover {
  color: #0087ff;
  cursor: pointer;
}

.box-tab input:checked + label {

  background: rgb(240,240,240);
  background: linear-gradient(180deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 60%);
  border: 1px solid #ddd;
  color: #0087ff;
  border-top: 3px solid #0087ff;
  border-bottom: 1px solid #fff;
  border-radius: 8px 8px 0px 0px;

}

#tab1:checked ~ #content-1,
#tab2:checked ~ #content-2,
#tab3:checked ~ #content-3 {
  display: block;
}

@media screen and (max-width: 768px) {
  .box-tab label span {
    display:none;
  }

  .box-tab label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 480px) {
  
  .box-tab label { padding: 10px 33px; }

}
/*Tab Nav*/

Veja o Resultado !

Baixar Código Veja Funcionando