Топ плагінів jQuery. Плагін адаптивного меню okayNav

39

Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. Сьогодні на черзі у нас плагін jQuery адаптивного меню okayNav. Цей плагін дозволяє буквально за лічені хвилини створити дуже оригінальний ефект адаптивного меню.

Отже, сьогодні ми працюємо з плагіном jQuery, який дозволяє створювати адаптивне горизонтальне меню. Звернемося до сторінці плагіна okayNav на GitHub, перейшовши за цим посиланням. Тут ми можемо завантажити архів плагіна і ознайомитися з документацією до нього. До речі, використовувати плагін дуже просто і це безумовний плюс для створюваного меню.

Підключаємо файл стилів і скрипт jQuery адаптивного меню:

Тепер нам потрібно верстка меню. Вона стандартна – звичайний список елементів меню в тезі nav:

Logo

  • Home
  • Shop
  • Blog
  • Services
  • Contacts
  • About us
  • Testimonials

Якщо заглянути зараз в браузер, то меню зараз буде приховано, і ми побачимо лише логотип. Щоб меню запрацювало, потрібно ініціалізувати його, викликавши однойменний метод плагіна – okayNav().

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

Подивимося на зміни в браузері.

Топ плагинов jQuery. Плагин адаптивного меню okayNav

Стандартне горизонтальне меню, нічого особливого. Але давайте спробуємо зменшити вікно браузера.

Топ плагинов jQuery. Плагин адаптивного меню okayNav

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

Топ плагинов jQuery. Плагин адаптивного меню okayNav

Також плагін jQuery адаптивне меню пропонує низку опцій, які ви можете використовувати при необхідності. В документації ви знайдете список доступних опцій і їх опис. Ну а у мене сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!