Tab Nav Responsivo Com Css

Postado: 30 de setembro de 2021

Tab nav Responsivo Com Css

Neste artigo vamos fazer uma tab de navegação, ou seja uma “Aba de Navegaçãoresponsiva 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

Publicado por: loopnerd

577 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.