Топ плагінів jQuery. Плагін Pushmenu

34

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

Ми вже працювали з схожим меню, використовуючи при цьому плагін Slidebars в одній з попередніх статей. У цій же статті ми по суті навіть не будемо використовувати плагін jQuery. По суті ми візьмемо кілька рядків коду jQuery, трохи стилів CSS і отримаємо приблизно таке ж рішення: просте і красиве.

Вихідні коди до статті Ви можете завантажити за посиланням (сайт автора, на жаль, недоступний). Отже, нам необхідна деяка верстка. Для початку сама виїжджає панель з меню, вона виглядає наступним чином:

  • Home
  • About
  • Projects
  • Blog
  • Contacts

Тепер кнопочка, за якою буде виїжджати з ефектом слайд наше меню:

Також для тега body необхідно додати клас pushmenu-push. Поки що все виглядає не дуже цікаво, м’яко кажучи.

Топ плагинов jQuery. Плагин Pushmenu

Однак давайте додамо пропонований в исходниках файл стилів. Скопіюйте у свій проект всю папку css, крім файлу стилів там ще знаходиться іконка меню. Підключимо файл стилів:

Вже на порядок краще.

Топ плагинов jQuery. Плагин Pushmenu

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

$(function() {
$menuLeft = $(‘.pushmenu-left’);
$nav_list = $(‘#nav_list’);
$nav_list.click(function() {
$(this).toggleClass(‘active’);
$(‘.pushmenu-push’).toggleClass(‘pushmenu-push-toright’);
$menuLeft.toggleClass(‘pushmenu-open’);
});
});

Спробуємо клікнути по кнопці виклику меню.

Топ плагинов jQuery. Плагин Pushmenu

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