Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню.
Функционал mmenu.js
Подключаем стили и скрипты:
<link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://opttour.ru/wp-content/themes/tester/scripts/jquery.mmenu.min.js"></script>
Инициализируем скрипт, и применяем его к меню
<script type="text/javascript">
$(function() {
$('nav').mmenu();
});
</script>
Пункты только в мобильном меню
Если мы хотим чтобы некоторые пункты появлялись только в мобильном меню, добавляем к ним класс mobile который изначально делает их display: none и с помощью медиазапросов будет их отображать. Можно сделать и наоборот, аналогичным образом, добавив к некоторым пунктам, которые не должны отображаться в мобильной версии, класс desktop.
