Tab Css

Postado: 28 de abril de 2022

Tab Css – Aprenda a criar abas de navegação com CSS e jQuery

Tab nav css é a navegação com guias é uma maneira de navegar em um site. Normalmente, a navegação por guias usa botões de navegação (guias) organizados junto com a guia selecionada.

As guias são perfeitas para aplicativos da Web de página única ou para páginas da Web capazes de exibir diferentes assuntos.

Geralmente são muito úteis para portfólio.

Vamos Adicionar os Códigos HTML:

    <section class="artigos-home">

        <ul>
            
            <li class="lista active" data-filter="all"> All</li>
            <li class="lista" data-filter="html5"> Html5</li>
            <li class="lista" data-filter="css3"> Css3</li>
            <li class="lista" data-filter="jquery"> jQuery</li>
            <li class="lista" data-filter="wordpress"> WordPress</li>
            <li class="lista" data-filter="javascript"> Javascript</li>

        </ul>
        
        <div class="row-articles">
        
            <article class="itemBox html5"> 
               
              <img src="images/html-article.jpg"> 
              <h1>Html</h1>
              <p>Onde e quando usamos a tags article no html</p>
              <a href="#" target="_blank" title="Veja mais">Veja mais</a> 
            
            </article>

            <article class="itemBox jquery"> 

              <img src="images/carrossel-responsivo-vertical-com-jquery.jpg">
              <h1>Jquery</h1>
              <p>Carrossel Responsivo Vertical com jquery</p>
              <a href="#" target="_blank" title="Veja mais">Veja mais</a> 

            </article>
            
            <article class="itemBox css3"> 

              <img src="images/botao-pulsa.jpg">
              <h1>Css</h1>
              <p>
                  <a href="#" target="_blank" title="Botão Pulse com Css">Botão Pulse com Css</a>
              </p> 

            </article>
           
            <article class="itemBox wordpress"> 

              <img src="images/wordpress.jpg">
              <h1>WordPress</h1>
              <p>Paginação sem usar Plugin</p>
              <a href="#" target="_blank" title="Veja mais"> Veja mais</a>  

            </article>

            <article class="itemBox html5"> 
               
              <img src="images/html-em.jpg"> 
              <h1>Html</h1>
              <p>Onde e quando usamos a tags em no html</p>
              <a href="#" target="_blank" title="Veja mais">Veja mais</a> 
 
            
            </article>

            <article class="itemBox jquery"> 

              <img src="images/mascara-nos-inputs-do-formulario-com-jquery-mask.jpg">
              <h1>Jquery</h1>
              <p>Máscara nos Inputs do Formulário Com jQuery Mask</p>
              <a href="#" target="_blank" title="Veja mais">Veja mais</a>

            </article>

            <article class="itemBox javascript"> 

              <img src="images/galeria-de-fotos-lightbox.jpg">
              <h1>Javascript</h1>
              <p>Galeria de Fotos Lightbox</p>
              <a href="#" target="_blank" title="Veja mais"> Veja mais</a> 
            
            </article>

            <article class="itemBox css3"> 

              <img src="images/botao-css-hover-efeito-reflexo.jpg">
              <h1>Css</h1>
              <p> 
                <a href="#" target="_blank" title="Botão Css – Hover Efeito Reflexo">Botão Css – Hover Efeito Reflexo</a>
              </p>

            </article>

            <article class="itemBox javascript"> 

              <img src="images/como-deixar-o-menu-fixo-ao-rolar-pagina.jpg">
              <h1>Javascript</h1>
              <p>Como deixar o Menu Fixo ao Rolar página</p>
              <a href="#" target="_blank" title="Veja mais">Veja mais</a> 
            
            </article>

            <article class="itemBox wordpress"> 

              <img src="images/nuvem-de-tags-wp.jpg">
              <h1>WordPress</h1>
              <p>Nuvem de tags sem usar Plugin em wordpress</p>
              <a href="#" target="_blank" title="Veja mais">Veja mais</a>

            </article>

            <article class="itemBox css3"> 

              <img src="images/botao-efeito-flutuante-com-css.jpg">
              <h1>Css</h1>
              <p>Botão Efeito Flutuante com Css</p> 
              <a href="#" target="_blank" title="Veja mais">Veja mais</a> 
            
            </article>

            <article class="itemBox html5"> 
               
              <img src="images/html-semantico.jpg"> 
              <h1>Html</h1>
              <p>Conheça as Tags semântica do html</p>
              <a href="#" target="_blank" title="Veja mais">Veja mais</a> 
            
            </article>
            

        </div>
    
    </section>

Vamos Adicionar os Códigos CSS:

.artigos-home { 

    padding:0.5em; 
    width:100%;
    float:left; 
    margin:0px auto; 
    background: #e9ecf0;
}

.artigos-home ul { 

    display:block; 
    margin-bottom:10px; 

}

.artigos-home ul li { 

    list-style:none; 
    background-color:#fff; 
    padding:8px 20px; 
    border-radius:5px; 
    margin:3px; 
    cursor:pointer; 
    display:flex; 
    float:left; 

}

.artigos-home ul li.active { 

    background-color:#03a9f4; 
    color:#fff;  

}

.row-articles { 

    width:100%; 
    display:flex; 
    flex-wrap:wrap; 
}

.row-articles .itemBox { 

    position:relative; 
    width:100%; 
    height:auto; 
    margin:5px; 
    background-color:#fff; 
    padding:0.8em;
    border-radius:4px; 
    overflow:hidden; 
    display:grid; 
}

.row-articles .itemBox img { 

    width:100%; 
    margin-bottom:6px; 
    float:left; 
}

.row-articles .itemBox h1 { 

    color:#4297cb; 
    font-size:1.5em; 
    margin-bottom:5px; 
    padding-bottom:5px; 
    border-bottom:1px #f4f4f4 solid;
    width:100%;
    float:left;

}

.row-articles .itemBox p { 
    
    width:100%;
    float:left;
    margin-bottom:10px;
    color:#444; 
    font-size:1em; 

}

.row-articles .itemBox a { 
    
    text-decoration:none;
    color:#4297cb; 
    font-size:1em; 

}

.row-articles .itemBox a:hover { 
    
    text-decoration:underline;
    color:#444; 

}

/*Responsivo*/

/*480PX BREAKPOINT*/
@media (min-width:30em){


}

/*600PX BREAKPOINT*/
@media (min-width:37em){


}

/*768PX BREAKPOINT*/
@media (min-width:48em){

.row-articles .itemBox { width:31.8%; }

}

/*960PX BREAKPOINT*/
@media (min-width:60em){

}

/*1280PX BREAKPOINT*/
@media (min-width:80em){

.artigos-home ul    { display:flex; }
.artigos-home ul li { display:block; }

}

Por último finalizamos com o Script

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script type="text/javascript">
	
	$(document).ready(function(){

		$('.lista').click(function(){

           const value = $(this).attr('data-filter');
           
           if (value == 'all'){

           	   $('.itemBox').show('1000');

           }else{

           	   $('.itemBox').not('.'+value).hide('1000');
           	   $('.itemBox').filter('.'+value).show('1000');

           } 

		})
        
        //Add Class And Remove class
        $('.lista').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
        })

	}) 

</script>

Veja o Resultado!

Baixar Código Veja Funcionando

Publicado por: loopnerd

288 Visualizações

Deixe um comentário

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