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

17

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

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

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

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

Далі нам потрібна розмітка. Вона не складна, але все ж дещо специфічна. Отже, нам знадобляться два контейнери з атрибутами canvas і off-canvas. У першому буде знаходитися основний контент, а в другому — виїжджає панель з меню, яка спочатку буде прихована.

Меню
  • Home
  • Profile
  • Messages

В основному контенті у нас лише кнопка, яка і буде відкривати меню.

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

Тепер щодо атрибута off-canvas, точніше його значення. Значення тут складене: перша його частина (main-menu) — це ID меню, з яким ми будемо працювати; друга частина відповідає за стан сайдбара (left, right, top або bottom); і остання частина відповідає за стиль для анімації і спосіб появи сайдбара (reveal, push, overlay або shift).

Залишилося лише ініціалізувати плагін та кнопку зв’язати з виїжджають меню. Це робиться приблизно таким кодом:

$(function() {
var controller = new slidebars();
controller.init();
$(‘#menu’).click(function(){
controller.toggle(‘main-menu’);
});
});

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

При кліку по кнопці панель з меню виїхала ліворуч, при повторному натисканні — меню ховається на місце. Як ви пам’ятаєте, ми легко можемо змінити розташування панелі меню, змінивши другий параметр атрибута off-canvas. Давайте розташуємо меню зверху:

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

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