Создайте более умное адаптивное меню навигации с помощью этого плагина jQuery

Каждый современный сайт нуждается в адаптивном макете и удобной навигации. Это дано.

Но меню гамбургеров может зайти так далеко, и они радикально меняют удобство использования для разных размеров экрана. Лучший способ справиться с этим – постепенно скрывать ссылки с помощью плагина, такого как OkayNav,

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: Как создать адаптивную навигацию

По умолчанию он опирается на

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

OkayNav чрезвычайно прост и предназначен для более простых веб-сайтов, которые имеют только несколько навигационных ссылок. Эти ссылки медленно прячутся за закадровым меню, как только они попадают в определенную область просмотра, и чем больше ссылок скрывается, тем меньше браузер.

Вам нужно будет обернуть неупорядоченный список в элемент навигации и присвоить ему определенный идентификатор. Затем вы можете нацелить всю навигацию с помощью функции okayNav () следующим образом:

var navigation = $ (‘# nav-main’). okayNav ();

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

И вы даже можете вызвать меню, чтобы открывать / закрывать по желанию, передавая определенные значения в функцию. Вот простой пример, чтобы открыть навигацию:

navigation.okayNav ( ‘openInvisibleNav’);

Все эти коды хорошо документированы в GitHub репо который также включает в себя загрузку сценария. Если вы предпочитаете маршрут CDN, вы также можете использовать Ссылка RawGit добавить этот скрипт прямо из GitHub.

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

Читайте также: Отзывчивые заголовки и логотипы – советы и подводные камни