HTML5, CSS3, jQuery. Портфолио html-верстальщика

Собирающееся меню

Опубликовано:
Собирающееся меню

Задача: сделать собирающееся резиновое меню, когда все его элементы не помещаются в контейнер

Такое меню довольно часто выручает, когда нужно сэкономить место на странице. Особенно, если речь идет об адаптивных страницах, которые расчитаны под все виды девайсов, от десктопа до мобильного телефона.

Итак, для того, чтобы нам сделать такое меню, нужно высчитать ширину каждого пункта меню и записать это значение в data. Если сумма пунктов больше ширины контейнера, тогда выкидываем один (последний) пункт в выпадающий список, предварительно добавив кнопку "Еще" для возможности показать остальные пункты. Так мы рекурсивно проходим по всему меню до того момента, пока видимые пункты не станут "влезать" в контейнер. Если мы уменьшаем страницу по ширине, тогда снова запускаем функцию на проверку вместимости видимых пунктов меню. Тоже самое делаем и при увеличении страницы по ширине, только в обратной последовательности.
    
var menuListWidth=0,
	menuListItem=$('.menu .list li');
	function buildMenu () {
		$('.menu .list li').each(function(){
			menuListWidth+=$(this).width();
			$(this).attr('data-width', $(this).outerWidth());
		});
	}
	function pushMenuItem (cnt) {
		if(cnt==null) cnt=0;
		menuListWidth = 0;
		menuListItem.each(function(){
			menuListWidth+=$(this).outerWidth();
		});

		if(($('.menu').width() - $('.menu .list').width() - $('.menu .list li').last().data('width')) < 180 ) {
			if($('.menu .more').length === 0) {
				$('.menu').append('<div class="more"><a href="#" class="dropdown">Еще</a><ul></ul></div>')
			}
			$('.menu .list').find('li').last().prependTo($('.menu .more').find('ul'));
		}
		if(cnt<=20) pushMenuItem(cnt+1);
	}

	function popMenuItem (cnt) {
		if(($('.menu').width() - $('.menu .list').width() - $('.menu .more li').first().data('width')) >= 180 ) {
			if($('.menu .more li').length === 0) {
				$('.menu .more').remove()
			}
			$('.menu .more').find('li').first().appendTo($('.menu .list'));
		}
		if(cnt<=20) pushMenuItem(cnt+1);
	}

	$(window).load(function(){
		buildMenu();
		pushMenuItem();
		$(document).on('click','.dropdown', function(){
			$(this).parent().find('ul').slideToggle();
		})
	});
	$(window).resize(function(){
		pushMenuItem();
		popMenuItem();
	});

HTML-код меню
    
<div class="menu">
	<ul class="list">
		<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>
	</ul>
</div>
    
Понравилась статья? Поделитесь с другими!

Вы можете авторизоваться на сайте через:
VkontakteYandex

Вы должны авторизоваться, чтобы оставлять комментарии.

Комментарии (0)