Manipulate Menu Style-1

custom.js

$(document).ready(function() {
  var menu = $("#nav-bar-filter"),
    subMenu = $(".subfilter"),
    more = $("#more-nav"),
    parent = $(".filter-wrapper"),
    ww = $(window).width(),
    smw = more.outerWidth();

  menu.children("li").each(function() {
    var w = $(this).outerWidth();
    if (w > smw) smw = w + 20;
    return smw
  });
  more.css('width', smw);

  function contract() {
    var w = 0,
      outerWidth = parent.width() - smw - 50;
    for (i = 0; i < menu.children("li").size(); i++) {
      w += menu.children("li").eq(i).outerWidth();
      if (w > outerWidth) {
        menu.children("li").eq(i - 1).nextAll()
          .detach()
          .css('opacity', 0)
          .prependTo(".subfilter")
          .stop().animate({
            'opacity': 1
          }, 300);
        break;
      }
    }
  }

  function expand() {
    var w = 0,
      outerWidth = parent.width() - smw - 20;
    menu.children("li").each(function() {
      w += $(this).outerWidth();
      return w;
    });
    for (i = 0; i < subMenu.children("li").size(); i++) {
      w += subMenu.children("li").eq(i).outerWidth();
      if (w > outerWidth) {
        var a = 0;
        while (a < i) {
          subMenu.children("li").eq(a)
            .css('opacity', 0)
            .detach()
            .appendTo("#nav-bar-filter")
            .stop().animate({
              'opacity': 1
            }, 300);
          a++;
        }
        break;
      }
    }
  }
  contract();

  $(window).on("resize", function(e) {
    ($(window).width() > ww) ? expand(): contract();
    ww = $(window).width();
  });

});

index.html

<div class="twelve columns filter-wrapper">
  <ul class="nav-bar-filter" id="nav-bar-filter">
    <li><a href="#">All</a>
    </li>
    <li><a href="#">Small</a>

    </li>
    <li><a href="#">Medium</a>

    </li>
    <li><a href="#">Extra large</a>

    </li>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#">Small-1</a>

    </li>
    <li><a href="#">Medium-1</a>

    </li>
    <li><a href="#">Extra large text</a>

    </li>
    <li><a href="#">Large text</a>

    </li>
    <li><a href="#">Another text</a>

    </li>
    <li><a href="#">text</a>

    </li>
  </ul>
  <ul id="more-nav">
    <li><b><a href="#">More &gt;</a></b>

      <ul class="subfilter"></ul>
    </li>
  </ul>
</div>

style.css

body {
  font-family: verdana;
  min-width: 250px;
}

ul#more-nav,
ul#nav-bar-filter {
  display: inline-block;
  vertical-align: top;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 4px 8px 4px 8px;
  margin: 0;
}

#nav-bar-filter li {
  display: inline-block;
  font-weight: bold;
}

a {
  text-decoration: none;
  color: #666;
  font-size: 13px;
}

.filter-wrapper {
  width: 100%;
  background: #eee;
  padding: 5px 10px 5px 10px;
}

#more-nav {
  float: right;
}

.subfilter {
  padding-top: 10px;
}

.subfilter li {
  margin: 0 0 0 20px;
  padding: 5px 0 0 0;
}