Все больше пользователей всемирной паутины сейчас заходят в сеть с различных мобильных устройств, поэтому будет не лишне, а вполне предсказуемо сделать удобным отображение элементов сайта, в частности, сегодня мы рассмотрим адаптивное меню, плагин для jQuery, под названием SlickNav.
Особенности данного плагина в следующем:
— поддержка многоуровненности
— простая разметка
— кроссбраузерность
— доступно использование клавиатуры
Плагин доступен для скачивания с официального сайта http://slicknav.com/
Использование
Подключаем стили и скрипт:
<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'); - закрытие
Примеры можно посмотреть здесь http://slicknav.com/#examples