Створіть розумніше чутливе меню навігації за допомогою цього додатка jQuery

Кожен сучасний сайт потребує a адаптивне компонування а корисна навігація. Це дано.

Але, гамбургер меню можна тільки йти так далеко, і вони кардинально змінити зручність використання для різних розмірів екрана. Кращий спосіб справитися з цим поступово приховує посилання з плагіном, наприклад OkayNav.

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

За замовчуванням він покладається на a

елемент а довгий невпорядкований список. Поки що, я не думаю, що цей плагін підтримує багаторівневі випадаючі списки, але якщо ви знаєте трохи jQuery, ви можете додати це самостійно.

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

Вам потрібно оберніть невпорядкований список в елементі навігації і надати йому певний ідентифікатор. Тоді ви можете орієнтуйте весь Nav з okayNav () така функція:

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

Зверніть увагу, що це лише найпростіша установка без будь-яких користувацьких функцій. Ви можете працювати більше десятка спеціальних опцій Вбудована в цю бібліотеку для керування стилем іконок, анімацією меню, підтримкою серветки та функціями зворотного виклику.

І навіть можна викликати меню відкривати / закривати за бажанням шляхом передачі певних значень функції. Ось простий приклад відкрити навігацію:

 navigation.okayNav ('openInvisibleNav');

Всі ці коди добре задокументовані в GitHub repo який також включає завантаження сценарію. Якщо ви віддаєте перевагу маршруту CDN, ви також можете використовувати Посилання RawGit щоб додати цей сценарій безпосередньо з GitHub.

OkayNav є відмінно підходить для невеликих сайтів які користуються передовою технікою навігації. Але, якщо ви все ще не впевнені, як це працює, ознайомтеся з цією демонстрацією на CodePen, показуючи, що може зробити цей маленький плагін.