Данный скрипт предназначен для создания всплывающего бокового меню в мобильной версии сайта. Но его также можно встроить и в ПК версии сайта.
Все мы встречали в современных сайтах так называемое гамбургер-меню - кнопка в виде трех горизонтальных полос. При нажатии на такую кнопку слева от сайта плавно выезжает боковое меню, внутри которого можно поставить не только ссылки на основные разделы сайта, но и произвольный контент - например контакты или кнопки поделиться.
Итак, чтобы подключить меню на сайте вам понадобится подключить mmenu.js (не забудьте библиотеку jquery) и menu-style.css. После скрипта понадобится прописать код инициализации меню:
<script type="text/javascript">
$(function() {
$('nav#menu').mmenu();
});
</script>
Чтобы добавить кнопку вызова бокового меню поставьте ссылку: <a href="#menu"></a> в требуемом месте.
И сам код бокового меню выглядит так (его можно поставить в любом месте):
<nav id="menu">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li>
<a href="/contacts">Контакты</a>
<ul>
<li><a href="/history/">История</a></li>
<li><a href="/team/">Отзывы</a></li>
</ul>
</li>
</ul>
</nav>
Если все сделаете правильно, то при нажатии на меню, слева появится боковое меню.
Если вы используете какой-либо другой элемент NAV, например a DIV, вы должны указать это в configuration.menuNodetypeопции:
$("#my-menu").mmenu({
configuration: {
menuNodetype: "div"
}
});
Подзаголовок в меню. Чтобы элемент отображался как метка без ссылки, добавьте класс "Label"в li.
Если нужен счетчик количества дочерних ссылок перед родительской, используйте:
$("#my-menu").mmenu({
configuration: {
counterClass: "bubble"
}
});
Чтобы открыть меню сразу при загрузке страницы, используйте: $("селектор").trigger("open"); или close - чтобы закрыть.
Вот и все, теперь вы готовы создать красивое скользящее меню, похожее на приложение, для своего мобильного веб-сайта.
