Создайте более умное адаптивное меню навигации с помощью этого плагина jQuery
Каждый современный сайт нуждается в адаптивный макет и удобная навигация. Это данность.
Но меню гамбургеров может зайти так далеко, и они радикально изменить юзабилити для разных размеров экрана. Лучший способ справиться с этим постепенно скрывающиеся ссылки с плагином, таким как OkayNav.
Это бесплатный плагин jQuery добавляет очень простую функцию меню на любую страницу, и это сскромно скрывает элементы навигации, на основе разных видовых экранов. Таким образом, пользователи смартфонов имеют единственное меню гамбургера, но пользователи планшета также могут видеть несколько ссылок.
По умолчанию он опирается на элемент и длинный неупорядоченный список. Пока что я не думаю, что этот плагин поддерживает многоуровневые выпадающие списки, но если вы немного знаете jQuery, вы можете добавить это самостоятельно.
OkayNav чрезвычайно прост, и это предназначен для более простых сайтов которые имеют только несколько навигационных ссылок. Эти ссылки медленно спрятаться за закадровым меню как только они попали в определенную область просмотра и больше ссылок скрывают чем меньше браузер.
Вам нужно будет оберните ваш неупорядоченный список в элементе навигации и дать ему конкретный идентификатор. Тогда ты можешь нацелиться на всю навигацию с okayNav () функционировать так:
var navigation = $ ('# nav-main'). okayNav (); Обратите внимание, что это просто простейшая настройка без каких-либо пользовательских функций. Вы можете работать с более десятка пользовательских опций встроенный в эту библиотеку для управления стилем иконок, анимацией меню, поддержкой прокрутки и функциями обратного вызова.
И вы даже можете вызвать меню открывать / закрывать по желанию путем передачи определенных значений в функцию. Вот простой пример открыть навигацию:
navigation.okayNav ( 'openInvisibleNav');
Все эти коды хорошо документированы в GitHub репо который также включает в себя загрузку сценария. Если вы предпочитаете маршрут CDN, вы также можете использовать Ссылка RawGit добавить этот скрипт прямо из GitHub.
OkayNav это отлично подходит для небольших сайтов которые выигрывают от прогрессивной техники навигации. Но, если вы все еще не уверены в том, как это работает, посмотрите эту демонстрацию на CodePen, показывающую, на что способен этот маленький плагин.
