JSFiddle - React, Tailwind, and code Playground

by frontendplace

HTML

<div class="twelve columns filter-wrapper">
  <h2 id="menulist">List</h2>
  <ul class="nav-bar-filter" id="nav-bar-filter" aria-labelledby="menulist">
    <li><a href="#">1.All</a></li>
    <li><a href="#">2.Small</a></li>
    <li><a href="#">3.Medium</a></li>
    <li><a href="#">4.Extra large</a></li>
    <li><a href="#">5.Text</a></li>
    <li><a href="#">6.Small-1</a></li>
    <li><a href="#">7.Medium-1</a></li>
    <li><a href="#">8.Extra large text</a></li>
  </ul>
  <ul id="more-nav">        
    <li><a href="#" class="more">More > </a>
      <ul class="subfilter" aria-labelledby="menulist">               
      </ul>
    </li>    
  </ul>
</div>

CSS

body{
        font-family: verdana;
        color: #999999;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
      }
      .row {
        width: 1020px;
      }   
      
      #more-nav {
        display: none;
        vertical-align: top;
        padding-left: 0;
        width: 150px;
      }
      
      .subfilter {
        padding-left: 0;
      }
      
      .subfilter > li {
        padding: 0 8px;
        list-style-type: none;
      }
      
      .subfilter > li > a {
        
        display: block;
        
        padding: 4px 8px;
        
      }
      
      #nav-bar-filter > li {
        display: inline-block;
      }
      
      #nav-bar-filter {
        padding-left: 0;
      }
      
      a {
        text-decoration: none;
        color: inherit;
      }
      
      li {
        list-style-type: none;
        padding: 0 8px;
      }
      
      #nav-bar-filter, #more-nav {
        display: inline-block;
      }
      
      .subfilter {
        display: block;
      }

JavaScript

$().ready(function () { 
      
      var setWaiAria = function(menuLi){
        menuLi.each(function (i,el) {
          var $el = $(el);
          $el.attr('aria-setsize',menuLi.length);
          $el.attr('aria-posinset',i+1);
        });
      }

      // set wai aria aria-setsize and aria-posinset before cloning elements in other list
      setWaiAria($("#nav-bar-filter > li"));

      //we reconstruct menu on window.resize
      $(window).on("resize", function (e) {                         
        var parentWidth = $("#nav-bar-filter").parent().width() - 40;
        var ulWidth = $("#more-nav").outerWidth();          
        var menuLi = $("#nav-bar-filter > li");         
        var liForMoving = new Array();
        var activeElement = $(document.activeElement)[0];

        // before remove item check if you have to reset the focus
        var removeOriginal = function(item,clone){
          // check focused element
          if(item.find('a')[0] === activeElement){
            activeElement = clone.find('a')[0];
          }
          
          item.remove();
        }

        //take all elements that can't fit parent width to array
        menuLi.each(function () {
          var $el = $(this);            
          ulWidth += $el.outerWidth(); 
          if (ulWidth > parentWidth) {
            liForMoving.unshift($el);
          }
        }); 

        if (liForMoving.length > 0) { //if have any in array -> move em to "more" ul
          e.preventDefault(); 

          liForMoving.forEach(function (item) {
            var clone = item.clone();
            clone.prependTo(".subfilter");
            
            removeOriginal(item, clone);
          });
              
        }
        else if (ulWidth < parentWidth) { //check if we can put some 'li' back to menu
          liForMoving = new Array();
          
          var moved = $(".subfilter > li");
          for (var i=0, j = moved.length ; i < j; i++) { 
            var movedItem =...