mixitup

mixitup

               Подключить mixitup.min.js
               
               //HTML controls
                <div class="filter_div controls">
                    <ul class="sub-menu hide-for-xm">
                        <li data-filter="all" class="filter active-port">All</li>
                        <li data-filter=".category-1" class="filter">Branding</li>
                        <li data-filter=".category-2" class="filter">Web</li>
                        <li data-filter=".category-3" class="filter">Logo Design</a></li>
                        <li data-filter=".category-4" class="filter">Photography</li>
                    </ul>
                </div>
                
                //HTML Portfolio items
                    <div id="portfolio_grid">
                        <div class="mix category-1"></div>
                        <div class="mix category-2"></div>
                        <div class="mix category-3"></div>
                        <div class="mix category-4"></div>
                    </div>
                  
                  //JS Portfolio 
                  $('#portfolio_grid').mixItUp();

                  $('.works li').click(function () {
                      $('.works li').removeClass('active-port');
                      $(this).addClass('active-port');
                  });
                  
                  //CSS
                  .active-port {
                    box-shadow: inset 0 -3px 0 #0eb493;
                  }
                  
                  !!!IMPORTANT!!!
                  #portfolio_grid .mix {
                    display: none;    
                  }