Manipulate Menu Style-2

custom.js

$().ready(function () {	
			
				//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();		
					//take all elements that can't fit parent width to array
					menuLi.each(function () {						
						ulWidth += $(this).outerWidth(); 
						if (ulWidth > parentWidth) {
							console.log(ulWidth);
							liForMoving.push($(this));
						}
					});							
					if (liForMoving.length > 0) {	//if have any in array -> move em to "more" ul
						e.preventDefault();						
						liForMoving.forEach(function (item) {
							item.clone().appendTo(".subfilter");
							item.remove();
						});							
					}
					else if (ulWidth < parentWidth) { //check if we can put some 'li' back to menu
						liForMoving = new Array();
						var moved = $(".subfilter > li");
						for (var i = moved.length - 1; i >= 0; i--) { //reverse order
							var tmpLi = $(moved[i]).clone();
							tmpLi.appendTo($("#nav-bar-filter"));
							ulWidth += $(moved[i]).outerWidth();
							if (ulWidth < parentWidth) {								
								$(moved[i]).remove();
							}
							else {
								ulWidth -= $(moved[i]).outerWidth();
								tmpLi.remove();
							}							
						}						
					}						
					if ($(".subfilter > li").length > 0) { //if we have elements in extended menu - show it
						$("#more-nav").show();
					}
					else {
						$("#more-nav").hide();
					}
				});
				
				$(window).trigger("resize"); //call resize handler to build menu right
			});

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>				
			</ul>
			<ul id="more-nav">			  
				<li><a href="#">More > </a>
					<ul class="subfilter">									
					</ul>
				</li>    
			</ul>
		</div>

style.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;
			}