От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас на рассмотрении плагин Slidebars, который помогает реализовать выезжающую с эффектом слайда панель меню. Плагин однозначно может быть полезен для любого современного сайта.
Итак, сегодня мы знакомимся с одним из лучших jQuery плагинов для организации меню на современных адаптивных сайтах — это плагин Slidebars. Пример его работы можно посмотреть прямо на официальном сайте. Изначально меню скрыто, но при клике по кнопке Menu — панель с меню выезжает слева с эффектом слайда.
Выглядит великолепно. Давайте и мы попробуем добиться такого же эффекта, руководствуясь примерами из документации к плагину. Для начала скачаем архив с плагином и подключим его файлы к нашему проекту.
|
1 2 3 |
<link href="css/slidebars.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/slidebars.js"></script> |
Далее нам необходима разметка. Она не сложна, но все же несколько специфична. Итак, нам потребуются два контейнера с атрибутами canvas и off-canvas. В первом будет находиться основной контент, а во втором — выезжающая панель с меню, которая изначально будет скрыта.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div canvas="container"> <div class="container content"> <div class="row"> <div class="col-md-6 js-close-any"> <button class="btn btn-success" id="menu">Меню</button> </div> </div> </div> </div> <div off-canvas="main-menu left shift"> <ul class="nav nav-pills nav-stacked"> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> |
В основном контенте у нас лишь кнопка, которая и будет открывать меню.
Теперь относительно атрибута off-canvas, точнее его значения. Значение здесь составное: первая его часть (main-menu) — это ID меню, с которым мы будем работать; вторая часть отвечает за положение сайдбара (left, right, top или bottom); и последняя часть отвечает за стиль для анимации и способ появления сайдбара (reveal, push, overlay или shift).
Осталось лишь инициализировать плагин и связать кнопку с выезжающим меню. Это делается примерно таким кодом:
|
1 2 3 4 5 6 7 |
$(function() { var controller = new slidebars(); controller.init(); $('#menu').click(function(){ controller.toggle('main-menu'); }); }); |
При клике по кнопке панель с меню выехала слева, при повторном клике — меню скрывается на место. Как вы помните, мы легко можем изменить положение панели с меню, изменив второй параметр атрибута off-canvas. Давайте расположим меню сверху:
|
1 2 3 |
<div off-canvas="main-menu top shift"> ... </div> |
И теперь панель с меню выезжает сверху. Согласитесь, такое меню действительно может пригодится для любого современного сайта. Ну а у меня на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
Комментарии (1)