Гибкое горизонтальное меню

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки".
Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
Есть особенность в работе скрипта. Родитель горизонтального меню, должен иметь размер в пикселях, а не %.

HTML

<div class="wrapper"><nav>
	<div class="container">
	<ul id="nav">
	<li><a href="#">Главная</a></li>
	<li><a href="#">О компании</a></li>
	<li><a href="#">Каталог</a></li>
	<li><a href="#">Услуги</a></li>
	<li><a href="#">Портфолио</a></li>
	<li><a href="#">Проекты</a></li>
	<li><a href="#">Акции</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Доставка</a></li>
	<li><a href="#">Форум</a></li>
	<li><a href="#">Блог</a></li>
	<li><a href="#">Сотрудники</a></li>
	<li><a href="#">Отзывы</a></li>
	<li><a href="#">Вакансии</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Статьи</a></li>
	<li><a href="#">Клиенты</a></li>
	<li><a href="#">Партнеры</a></li>
	<li><a href="#">История</a></li>
	<li><a href="#">Фотогалерея</a></li>
	<li><a href="#">Видео</a></li>
	<li><a href="#">Сервис</a></li>
	<li class="more">
	<span>...</span>
	<ul id="overflow">
	</ul>
	</li>
	</ul>
	</div>
	</nav>
	</div>

jQuery

Подключаем jQuery и затем сам скрипт. Его можно поместить в файл.
window.onresize = navigationResize;
	
	navigationResize();
	
	function navigationResize() {  
	
	$('#nav li.more').before($('#overflow > li'));
	
	var navItemMore = $('#nav > li.more'),
	navItems = $('#nav > li:not(.more)'),
	navItemWidth = navItemMore.width(),
	windowWidth = $('#nav').parent().width(),
	navOverflowWidth;
	
	navItems.each(function(){
	navItemWidth += $(this).width();
	});
	
	navItemWidth > windowWidth ? navItemMore.show() : navItemMore.hide();
	
	while (navItemWidth > windowWidth) {
	navItemWidth -= navItems.last().width();
	navItems.last().prependTo('#overflow');
	navItems.splice(-1,1);
	}
	navOverflowWidth = $('#overflow').width();
	
	}
При желании можно подружить данный скрипт и с уже выпадающими горизонтальными меню.
СКАЧАТЬСкачек: 261
4,44 Kb
Кто скачал? ДЕМОПосмотреть
пример