Главная » Javascript » SlickNav — адаптивное меню. Плагин для jQuery

SlickNav — адаптивное меню. Плагин для jQuery

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

Особенности данного плагина в следующем:
— поддержка многоуровненности
— простая разметка
— кроссбраузерность
— доступно использование клавиатуры

Плагин доступен для скачивания с https://github.com/ComputerWolf/SlickNav

Использование
Подключаем стили и скрипт:

<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="SlickNav/jquery.slicknav.min.js"></script>

Делаем разметку меню:

<ul id="menu">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
 <li><a href="#">item 4</a></li>
</ul>

Инициализируем скрипт:

<script> $(function(){ $('#menu').slicknav();
 });
</script>

Без какой-либо настройки, по-умолчанию, меню будет раскрыто и отображено.
Доступны следующие настройки (в скобках указано дефолтное значение):

label ("MENU") - метка для кнопки меню.
duplicate (true) - If true, a copy of the menu element is made for the mobile menu. This allows for separate functionality for both mobile and non-mobile versions.
duration (200) - длительность анимации.
easingOpen ("swing") - анимация открытия меню, линейная или скачкообразное ("Swing" или "Linear").
easingClose ("swing") - анимация закрытия меню, линейная или скачкообразное ("Swing" или "Linear").
closedSymbol ("&#9658;") - символ закрытого элемента родителя.
openedSymbol ("&#9660;") - символ открытого элемента родителя.
prependTo ("body") -элемент, jQuery объект или селектор строковое значение элемента для добавления мобильного меню.
parentTag ("a") - тип элемента для родителя.
closeOnClick (false) - закрытие меню, когда по нему кликают.
allowParentLinks (false) - разрешить кликабельность ссылок как родительских элементов.

Колбаки или обратные вызовы:
init
beforeOpen
afterOpen
beforeClose
afterClose

Методы:

$('.menu').slicknav('toggle'); - переключение
$('.menu').slicknav('open'); - открытие
$('.menu').slicknav('close'); - закрытие
При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.



«
»
➤