Адаптивное сворачивающееся меню (FlexMenu) с кнопкой "Еще"

Часто бывает так, что главное меню содержит слишком много пунктов меню, которые не влезают по ширине экрана. В два ряда меню делать не принято, поэтому приходится придумывать другие выходы. Можно уменьшить шрифт пунктов меню, уменьшить отступы между пунктами. Но обычно и этого не достаточно. В таком случае проще всего сделать дополнительную кнопку «Еще» и скрыть под ней сколько угодно пунктов меню. Сделать такую фишку можно с помощью обычной html разметки, но в таком случае оно будет не адаптивное. Тоесть мы задаем в разметке изначальное количество пунктов меню в видимой части и сразу задаем скрытые под кнопкой «Еще» пункты.

				
					<ul class="navmenu">
        <li><a href="#">Пункт меню 1</a></li>
        <li><a href="#">Пункт мункт 2</a></li>
        <li><a href="#">Пункт мункт 3</a></li>
        <li><a href="#">Пункт мункт 4</a></li>
        <li><a href="#">Пункт мункт 5</a></li>
        <li><a href="#">Пункт мункт 6</a></li>
        <li><a href="#">Пункт мункт 7</a></li>
        <li><a href="#">Пункт мункт 8</a></li>
        <li><a href="#">Еще</a></li>
            <ul>
                <li><a href="#">Скрытый пункт 1</a></li>
                <li><a href="#">Скрытый пункт 2</a></li>
                <li><a href="#">Скрытый пункт 3</a></li>
            </ul>
    </ul>

Адаптивное меню с кнопкой "Еще"

Мы будем использовать небольшой плагин — Флексменю. FlexMenu — это плагин jQuery, который позволяет создавать адаптивные меню, которые автоматически сворачиваются в раскрывающийся список «еще», когда в них заканчивается место. Если для отображения одного или двух элементов достаточно места, все элементы сворачиваются в раскрывающееся меню.

Самый простой вариант скрипта, который работает сразу из коробки с минимумом возни.

Исходный код на GitHub

Приступим к подключению: сначала подключим скрипт flexmenu.js (или его уменьшенную версию flexmenu.min.js) к сайту.

				
					// Сначала подключаем jQuery, если у вас WordPress или другая популярная CMS, то как правило jQuery уже подключен.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

// Теперь подключаем скрипт Flexmenu
<script src="flexmenu/flexmenu.min.js"></script>

// Настройки плагина Flexmenu
<script type="text/javascript">
jQuery(document).ready(function($){
    $('ul.navmenu').flexMenu({
        showOnHover: false,
        linkText: "Еще...",
        linkTitle: "Показать еще",
        linkTextAll: "Меню",
        linkTitleAll: "Развернуть меню", 
        popupClass: 'more_dropdown'
    });
});
</script>

$(‘ul.navmenu’).flexMenu — вместо «ul.navmenu» указываем свое меню, можно указать класс или id.

Адаптивное сворачивающееся меню (FlexMenu) с кнопкой «Еще»

Адаптивное меню с кнопкой "Еще"