data filter javascript

data filter javascript

Como fazer abas de navegação com html, css e javascript

Neste tutorial vamos criar uma estrutura de abas com HTML, CSS e javascript.

Nesta seção, projetaremos uma estrutura simples na tag <ul>, <li>, <img>, e a <a> para inserir o link de destino. 

Usaremos as classes (.abas .tudo .sucos, .salgados e .refrigerantes) para dar o formato e estilizar com css.

Essas é a tags e classes que usaremos para criar a nossas Abas de navegação.

Vamos Adicionar o HTML

    <ul class="abas">

      <li><a href="" class="tudo" data-filter="tudo">Todos</a></li>
      <li><a href="" class="sucos" data-filter="sucos">Sucos</a></li>
      <li><a href="" class="salgados" data-filter="salgados">Salgados</a></li>
      <li><a href="" class="refrigerantes" data-filter="refrigerantes">Refrigerantes</a></li>

    </ul>


    <ul class="lista-categoria">

        <li class="salgados" data-categoria="salgados"> 
            <img src="uploads/salgados.jpg" alt="salgados" title="salgados">
        </li>

        <li class="sucos" data-categoria="sucos"> 
            <img src="uploads/sucos.jpg" alt="sucos" title="Sucos">
        </li>

        <li class="salgados" data-categoria="salgados"> 
            <img src="uploads/salgados.jpg" alt="salgados" title="salgados">
        </li>

        <li class="salgados" data-categoria="salgados"> 
            <img src="uploads/salgados.jpg" alt="salgados" title="salgados">
        </li>

        <li class="refrigerantes" data-categoria="refrigerantes"> 
            <img src="uploads/refrigerantes.jpg" alt="refrigerantes" title="Refrigerantes">
        </li>

        <li class="sucos" data-categoria="sucos"> 
            <img src="uploads/sucos.jpg" alt="sucos" title="Sucos">
        </li>

        <li class="refrigerantes" data-categoria="refrigerantes"> 
            <img src="uploads/refrigerantes.jpg" alt="refrigerantes" title="Refrigerantes">
        </li>

        <li class="sucos" data-categoria="sucos"> 
            <img src="uploads/sucos.jpg" alt="sucos" title="Sucos">
        </li>


     </ul>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a  nossa Tab de navegação.

ul, li {
  list-style: none;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

.abas {

  display: block;
  margin: 0px 0 10px;
  float: left;
  width: 100%;

}

.abas li {

  margin: 0 0px;

}

.abas li a {

    padding: 8px 20px;
    background: #007cff;
    color: #fff;
    font-size: 0.9em;
    border-radius: 3px;
    transition: 0.3s ease;
    display: block;
    float: left;
    margin: 2px;

}

.abas li.ativo { 
    background-color:#242424; 
    color:#fff;  
}

.abas li a:hover {

  opacity: 0.8;

}

.lista-categoria {

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: auto;

}

.lista-categoria li {
  
  width: calc(100% - 5px);
  margin-right: 5px;
  margin-bottom: 5px;

}

.lista-categoria li img {

  width: 100%;

}

.animacao {

  opacity: 1;
  animation: 0.6s zoom-in;

}

@keyframes zoom-in {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

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

    .abas { display: flex; justify-content: center;  margin: 30px 0 40px; }

    .abas li { margin: 0 10px; }

    .abas li a { padding: 10px 30px; font-size: 1em; }

    .lista-categoria      { width: calc(100% + 30px); }
    
    .lista-categoria li   { width: calc(33.3333% - 20px); margin-right: 20px; margin-bottom: 20px; }

} 

Vamos adicionar o script para filtrar as abas

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
    
    $(function(){
      
      var $btn  = $('.abas [data-filter]'),
          $lista = $('.lista-categoria [data-categoria]');
       
      $btn.on('click', function() {
        
        var $btnCategoria = $(this).attr('data-filter');
        
        $lista.removeClass('animacao');

        if ($btnCategoria == 'tudo') {

            $lista.show().addClass('animacao');

        } else {
           
           $lista.hide().removeClass('animacao').filter('[data-categoria = "' + $btnCategoria + '"]').show().addClass('animacao');
        }

        return false;
        
      });

    });


</script>

Combinando as Três seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando