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

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

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

Итак, сегодня мы знакомимся с одним из лучших jQuery плагинов для организации меню на современных адаптивных сайтах — это плагин Slidebars. Пример его работы можно посмотреть прямо на официальном сайте. Изначально меню скрыто, но при клике по кнопке Menu — панель с меню выезжает слева с эффектом слайда.

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

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

<link href="css/slidebars.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/slidebars.js"></script>

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
<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>

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

Топ плагинов 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. Давайте расположим меню сверху:

<div off-canvas="main-menu top shift">
...
</div>

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

И теперь панель с меню выезжает сверху. Согласитесь, такое меню действительно может пригодится для любого современного сайта. Ну а у меня на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Вячеслав

    Спасибо автору за познавательный и интересный материал.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree