Мобильное многоуровневое меню slickNav

Сегодня хочу представить вашему вниманию адаптивное и многоуровнёвое мобильное меню. 

Подключение скриптов, HTML разметка, инициализация

Конечно же, первым делом подключаем CSS и Javascript файлы: 

<link rel="stylesheet" href="SlickNav/dist/slicknav.min.css" />
<script src="SlickNav/dist/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>

Опции скрипта

Опции передаются в самом методе инициализации. То есть: 

$('#menu').slicknav('label' : 'MENU');

'label' : 'MENU', // надпись на кнопке меню рядом с бургером. Если не нужно, то указываем пустое значение.
'duplicate': true, // если указано true, то меню будет продублировано, в противном случае - оригинальное меню будет скрыто.
'duration': 500, // плавность анимации. 
'easingOpen': 'swing', // тип анимации, которая используется при открытии меню (линейная - linear, скачкообразная - swing).
'easingClose': 'swing', // аналогично свойству выше, но только для закрытого меню. 
'closedSymbol': '►', // символ, который отображается возле пункта меню, который является родителем и дочерние элементы которого скрыты.
'openedSymbol': '▼', // аналогично свойству выше, но у которого дочерние элементы развёрнуты.
'prependTo': 'body', // селектор элемента, внутри которого, в самое начало будет прикреплено мобильное меню.
'appendTo': '', // аналогично пункту выше, но мобильное меню будет прикреплено в конец указанного элемента. 
'parentTag': 'a', // элемент, который будет использоваться в качестве родительского.
'allowParentLinks': false, // делать ли родительские ссылки кликабельными.
'showChildren': false, // Показывать ли по умолчанию дочерние ссылки.
'animations': 'jquery' // Библиотека для анимации. Возможные значения - jquery, velocity.

Колбэки

'init': function(){}, // вызывается после инициализации меню.
'beforeOpen': function(trigger){}, // вызывается перед тем как пункт меню (или подменю) будет раскрыт.
'beforeClose': function(trigger){}, // вызывается перед тем как пункт меню (или подменю) будет закрыт.
'afterOpen': function(trigger){}, // вызывается после того как пункт меню (или подменю) будет раскрыт.
'afterClose': function(trigger){} // вызывается после того как пункт меню (или подменю) будет закрыт.

Методы

$('.menu').slicknav('toggle'); // метод переключения (открытие/закрытие) меню
$('.menu').slicknav('open'); // метод открытия меню
$('.menu').slicknav('close'); // метод закрытия меню

Отображение меню

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

Например:

.slicknav_menu {
    display:none;
}

@media screen and (max-width: 40em) {
    /* #menu is the original menu */
    .js #menu {
        display:none;
    }

    .js .slicknav_menu {
        display:block;
    }
}