Все больше пользователей всемирной паутины сейчас заходят в сеть с различных мобильных устройств, поэтому будет не лишне, а вполне предсказуемо сделать удобным отображение элементов сайта, в частности, сегодня мы рассмотрим адаптивное меню, плагин для 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 ("►") - символ закрытого элемента родителя. openedSymbol ("▼") - символ открытого элемента родителя. prependTo ("body") -элемент, jQuery объект или селектор строковое значение элемента для добавления мобильного меню. parentTag ("a") - тип элемента для родителя. closeOnClick (false) - закрытие меню, когда по нему кликают. allowParentLinks (false) - разрешить кликабельность ссылок как родительских элементов.
Колбаки или обратные вызовы:
init
beforeOpen
afterOpen
beforeClose
afterClose
Методы:
$('.menu').slicknav('toggle'); - переключение $('.menu').slicknav('open'); - открытие $('.menu').slicknav('close'); - закрытие