TerryMooreII/more.html

## more.html
<!doctype html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<style>

	*{padding:0px; margin:0px;}

	#menu{
		position:relative;
		top:100px;
		left:100px;
		width:450px;
		height:20px;
		border:1px solid red;

		white-space: nowrap;
	}
	#menu ul{

	}
	#menu > ul > li{
		padding:0px 5px 0px 5px;
		float:left;
		list-style: none;
		border-right:1px solid pink;
	}
	#more{
		display:absolute;
		top:20px;
		right:20px;
		bottom:auto;
		width:150px;
		border:1px solid #333;
		display:none;
		z-index: 99;
		background-color:#eee;
		float:right;
	}
	#more > ul > li{
		list-style: none;
	}
	</style>

</head>
<body>

<div id="menu">
	<ul>
		<li>One</li>
		<li>Two</li>
		<li>Three Three</li>
		<li>Fourty Eight</li>
		<li>Ten</li>
		<li>Testing Space</li>
		<li>Holy Cow</li>
		<li>Running Low</li>
		<li>This is the One</li>
		<li>Done</li>
	</ul>
	<div id="more"><ul></ul></div>
</div>

<script>

var total = 0;
var width = $('#menu').width()-100;

function more(){

	$('#menu li').each(function(k,v){
		console.log($(this))
		total += $(this).width();

		if (total > width){
			$(this).appendTo('#more > ul');

		}
	});

	if (total > $('#menu').width()){
		console.log(total)
		$('#menu > ul').append('<li class="seeMore">more...</li>')

	}
	$('.seeMore').hover(function(){

		$('#more').show();

	}, function(){
		$('#more').hide();
	});


}
more();
$(window).resize(function () {

      more()
});


</script>


</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title></title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<style>

	*{padding:0px; margin:0px;}

	#menu{
	position:relative;
	top:100px;
	left:100px;
	width:450px;
	height:20px;
	border:1px solid red;

	white-space: nowrap;
	}
	#menu ul{

	}
	#menu > ul > li{
	padding:0px 5px 0px 5px;
	float:left;
	list-style: none;
	border-right:1px solid pink;
	}
	#more{
	display:absolute;
	top:20px;
	right:20px;
	bottom:auto;
	width:150px;
	border:1px solid #333;
	display:none;
	z-index: 99;
	background-color:#eee;
	float:right;
	}
	#more > ul > li{
	list-style: none;
	}
	</style>

	</head>
	<body>

	<div id="menu">
	<ul>
	<li>One</li>
	<li>Two</li>
	<li>Three Three</li>
	<li>Fourty Eight</li>
	<li>Ten</li>
	<li>Testing Space</li>
	<li>Holy Cow</li>
	<li>Running Low</li>
	<li>This is the One</li>
	<li>Done</li>
	</ul>
	<div id="more"><ul></ul></div>
	</div>

	<script>

	var total = 0;
	var width = $('#menu').width()-100;

	function more(){

	$('#menu li').each(function(k,v){
	console.log($(this))
	total += $(this).width();

	if (total > width){
	$(this).appendTo('#more > ul');

	}
	});

	if (total > $('#menu').width()){
	console.log(total)
	$('#menu > ul').append('<li class="seeMore">more...</li>')

	}
	$('.seeMore').hover(function(){

	$('#more').show();

	}, function(){
	$('#more').hide();
	});


	}
	more();
	$(window).resize(function () {

	more()
	});




	</script>


	</body>
	</html>