Tab nav com css

Tab nav com css

Neste tutorial você vai aprender como criar um Tab nav com Css, Html.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tags: <div>, <input>, <label>, <h2> e a tag <p> para inserirmos o texto de descrição.

Essas tags usaremos para criar a nossa Tab de navegação com html e css.

Vamos Adicionar o HTML

<div class="box-tab">

    <input class="radio" id="um" name="group" type="radio" checked>
    <input class="radio" id="dois" name="group" type="radio">
    <input class="radio" id="tres" name="group" type="radio">
  
    <div class="tabs">
    
        <label class="tab" id="one-tab" for="um">Css</label>
        <label class="tab" id="two-tab" for="dois">Html</label>
        <label class="tab" id="three-tab" for="tres">Jquery</label>
   
   </div>
  
    <div class="panels">
  
        <div class="panel" id="tab-um">
            
            <h2 class="tab-title">Css</h2>
            <p>
                Texto sobre Css aqui...
            </p>
        
        </div><!--1-->
      
        <div class="panel" id="tab-dois">
        
            <h2 class="tab-title">Html</h2>
            <p>
                Texto sobre Html aqui...
            </p>
        
        </div><!--2-->
        
        <div class="panel" id="tab-tres">
            
            <h2 class="tab-title">Jquery</h2>
            <p>Texto sobre jquery aqui...</p>
      
        </div><!--3-->
  
    </div>
  
</div><!--Box tab-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nossa tab nav com css e html.

.box-tab{

  display:flex;
  flex-direction: column;
  align-items: center;

}

.tab{

    cursor: pointer;
    padding: 10px 25px;
    margin: 0px -1px;
    background: #28ccd0;
    color: #fff;
    border-radius: 3px 3px 0px 0px;
    display: inline-block;

}

.tabs { 

    width: 100%;
    float: left; 

} 

.panels{

  background:#fffffff6;
  min-height:260px;
  width:100%;
  border-radius:3px;
  overflow:hidden;
  padding:20px;  

}

.panel{

  display:none;
  animation: fadein .8s;

}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.tab-title{

  width:100%;  
  float:left;
  margin-bottom:10px;
  font-size:1.5em;
  font-weight:bold

}

.radio{
  display:none;
}

#um:checked ~ .panels #tab-um,
#dois:checked ~ .panels #tab-dois,
#tres:checked ~ .panels #tab-tres{
  display:block
}
#um:checked ~ .tabs #one-tab,
#dois:checked ~ .tabs #two-tab,
#tres:checked ~ .tabs #three-tab{
  background:#fffffff6;
  color:#000;
  border-top: 3px solid #28ccd0;
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando