FlexMenu — сворачивающееся адаптивное меню на jQuery

Приветствую всех! Решил подкинуть своим читателям и подписчикам очередную полезность для сайта — адаптивное меню путем сворачивания не помещающихся пунктов в подпункты с названием, например, «Еще…». То есть пункты прячутся в подпункт «Еще…», когда не хватает места на экране. Естественно все это происходит автоматически с помощью небольшого плагина для jQuery под названием flexMenu.

Первом делом давайте сначала посмотрим на демку, чтобы понять нужно вообще читать дальше или нет. Откройте страницу с меню и уменьшайте размер экрана.

Теперь давайте разберем подробнее как это все работает. Вы можете скачать исходники плагина flexMenu с гитхаб, официальной странички разработчика. Здесь же найдете и демо, и документацию к использованию. Но у кого туго с английским я разберу документацию здесь. Ничего сложного нет, подключается и вызывается плагин также, как и любой другой для jQuery. Также не забываем сначала подключить саму библиотеку jQuery.

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="flexmenu/modernizr.custom.js"></script>
<script src="flexmenu/flexmenu.min.js"></script>

Если заметили, мы помимо jQuery и самого flexMenu подключили еще и Modernizr. Подключение библиотеки Modernizr не является обязательным. Оно просто определяет сенсорные устройства, т.е. если меню открыто на мобильном устройстве с сенсорным экраном, то тегу HTML будет добавлен дополнительный класс —  js touch. С помощью данного класса мы можем придать другие стили для мобильных устройств, чтобы было удобнее открывать подпункты, щелкая пальцем.

HTML-код меню

Приведу HTML-код меню, чтобы было понятнее использование классов при вызове плагина.

<nav class="flexmenu">
    <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="#">Пункт 9</a></li>
        <li><a href="#">Пункт 10</a></li>
    </ul>
</nav>

Использование плагина

jQuery(document).ready(function($){
    $('ul.navmenu').flexMenu({
        showOnHover: false,
        linkText: "Еще...",
        linkTitle: "Показать еще",
        linkTextAll: "Меню",
        linkTitleAll: "Развернуть меню", 
        popupClass: 'more_dropdown'
    });
});

Дополнительные опции

threshold

(Число, по умолчанию — 2). Честно казать, не знаю в чем полезность данной опции. Более того, я считаю, что она должна работать немного по другому.

Данной опции передаем имеющееся количество пунктов меню и при этом пункты не будут прятаться в подпункты, а будут просто переноситься на новую строку. Для чего это нужно — понятия не имею. На мой взгляд должно быть так — задаем число, при котором пункты меню перестают прятаться в подпункты и переносятся на новую строку. Хотя и это не знаю где может пригодиться. В общем, объяснение я этому не нашел.

cutoff

(Число, по умолчанию — 2). Данной опцией задаем после какого количества пунктов мы должны показать одну кнопку раскрытия меню. Т.е. здесь есть возможность спрятать все меню в одну кнопку и назвать ее как угодно (через опцию linkTextAll и linkTitleAll, но об этом ниже), например, «Меню» (см. демо — уменьшите экран до мобильного устройства).

linkText

(Строка, по умолчанию — More). Задаем текст ссылки «More» подпунктов, например, «Показать еще» или просто «Еще…».

linkTitle

(Строка, по умолчанию — View More). Атрибут title для ссылки «More».  Т.е. можно задать подсказку ссылке, например, «Показать все подпункты».

linkTextAll

(Строка, по умолчанию — Menu). Текст ссылки раскрытия всех подпунктов. Это когда все пункты прячутся в одну кнопку.

linkTitleAll

(Строка, по умолчанию — Menu). Атрибут title для ссылки раскрытия всех подпунктов. Опять же, можно задать подсказку при наведении курсора.

shouldApply

(Функция. По умолчанию возвращает — true). Функция срабатывает при изменении размера родительского контейнера меню. Чтобы проверить достаточно изменить размер экрана. Если функция вернет ложь (false), то ссылка «More» удалится, а не помещающиеся пункты перенесутся на новую строку.

$('ul.navmenu').flexMenu({ 
        shouldApply: function(){
        console.log('Функция вернула ложь');
        return false;
    }
});

showOnHover

(Boolean, по умолчанию — true). Выпадающие подпункты выпадают при наведении на ссылку «More». Если хотите вызывать их по клику установите данный параметр в  false.

undo

(Boolean, по умолчанию — false). Если перевести на русский, undo — означает уничтожить. Данный параметр, если выставить в true, вернет меню в первоначальное состояние, т.е. покажутся все пункты и исчезнет ссылка «More».

popupAbsolute

(Boolean, по умолчанию — true). По умолчанию выпадающему списку задается правило — position: absolute. Если вам нужно как-то по другому настроить выпадение без абсолютного позиционирования, то выставьте данное значение в false.

popupClass

(Строка, по умолчанию доп. класс не выводится). Дополнительный класс выпадающему списку. Сделано для удобства, если вас чем-то не устраивает имеющийся класс.

Вот и все опции.

Я немного поковырялся в скрипте и изменил метод закрывания подпунктов. Они закрывались только, если мы снова нажмем на ссылку «More», а мне хотелось, чтобы подпункты скрывались помимо самой ссылки «More» еще, кликнув в любом месте документа.

Где можно применить FlexMenu?

Наиболее часто данное flexMenu я применяю при адаптации вкладок (табов). Например данные табы можно найти в карточке товара практически любого интернет магазина. По клику можно переключать скрытый контент. Когда табы не вмещаются в экран, тем более когда их много, то просто не знаешь что с ними делать. FlexMenu как раз решает данную проблему — свернули в «More» лишние пункты и все.

Также flexMenu может пригодиться при адаптации хлебных крошек (навигатор на сайте). Бывают длинные пункты у хлебных крошек и они переносятся на следующую строку, что в свою очередь не очень удобно смотрится на мобильных устройствах. Как раз с помощью данного плагина можно оставить в одну строку то количество пунктов, которые помещаются в экран мобильного устройства.

Вот такой вот полезный скрипт. Внедряйте и делайте свои сайты удобными. На этом у меня все. До встречи в следующих постах!

[attention] Если вы хотите внедрить данный скрипт на свой сайт, но не хотите или не понимаете как это делать, то можете обратиться ко мне через форму обратной связи. Я вам помогу. Стоить данная услуга будет — 500 руб. [/attention]