RU EN

Мобильное меню для сайта. Плагин JQuery mmenu.

2017-01-08

В этой статье речь пойдёт о том, как создать меню для мобильной версии сайта, которое бы вписывалось в адаптивный дизайн. Рассказать я хочу про плагин для JQuery под названием mmenu(можете сходить по ссылке чтобы скачать плагин и сразу посмотреть как будет выглядеть меню, которое мы будем делать). Плагин мы будем использовать, потому что строить свой велосипед каждый раз - не лучшая из практик. Наш путь - использовать нароботки.Начнём.

Подключение


Автор советует использовать html 5 doctype, ну тут я думаю альтернативы нам и не нужны, используем его. В области head нашего документа нам нужно подключить сам JQuery и два файла плагина, подключаем:

<head>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="mmenu/dist/js/jquery.mmenu.min.js" type="text/javascript"></script>
<link href="mmenu/dist/css/jquery.mmenu.css" type="text/css" rel="stylesheet" />

Если нам нужно on-canvas меню, тогда нужно подключать файлы jquery.mmenu.oncanvas.min.js и jquery.mmenu.oncanvas.css. On-canvas - это такая версия меню, кторая имеет position:absolute; width:100%; height:100% , что растягивает её на весь экран.

Создаём меню


Меню создаётся очень просто - как неупорядоченный html-список, плагин поддерживает вложенность списков.Всё это должно быть обёрнуто в тег nav, у которого задан id.

<nav id="my-menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About us</a>
<ul>
<li><a href="/about/history/">History</a></li>
<li><a href="/about/team/">The team</a></li>
<li><a href="/about/address/">Our address</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>

Стили меню


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

<nav id="my-menu">
<ul>
<li><a href="/">Home</a></li>
<li><span>About us</span>
<ul class="Vertical">
<li><a href="/about/history/">History</a></li>
<li><a href="/about/team/">The team</a></li>
<li><a href="/about/address/">Our address</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>

2.Чтобы сделать подменю всегда видимым, нужно добавить к нему класс "Inset".
3.Добавьте класс "Selected" к элементу меню, чтобы сделать его выделенным.
4.Можно создавать разделители следующим образом

<nav id="my-menu">
<ul>
<li class="Divider">Website</li>
<li><a href="/">Home</a></li>
<li><a href="/about/">About us</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>

Javascript


Вам понадобится кнопка, нажатие на которую бы открывало меню. Я советую использовать вот эти гамбургеры. Там можно прочитать как использовать их. Если коротко, то вам нужно будет скачать стили гамбургера, подключить их на страницу, и добавить приблизительно такой html-код

<button id="mmenu-icon" class="Fixed hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>

Класс Fixed я использовал чтобы установить position:fixed

Чтобы наше мобильное меню заработало, осталось только подключить следующий javascript код на страницу

$(document).ready(function() {

var $menu = $("#my-menu").mmenu();

var $icon = $("#mmenu-icon");

var API = $menu.data( "mmenu" );


$icon.on( "click", function() {

API.open();

});


API.bind( "opened", function() {

setTimeout(function() {

$icon.addClass( "is-active" );

}, 100);

$icon.on( "click", function() {

API.close();

});

});

API.bind( "closed", function() {

setTimeout(function() {

$icon.removeClass( "is-active" );

}, 100);

$icon.on( "click", function() {

API.open();

});

});

});

Проблемы


Используя mmenu я столкнулся с двумя проблемами. Сначала я пытался обернуть всё содержимое body в тег div, потому что это нужно чтоб плагин работал. Но в этом случае он почему-то скрывал всё содержимое, которое я оборачивал. Поэтому я отказался от этого. Если вы не завернёте всё в что у вас в body в div, то плагин сделает это за вас. Но тут будут проблемы двойного запуска js-скриптов и другие. После этого я сразу столкнулся со второй проблемой: плагин не оборачивает ничего кроме div. То есть если у вас есть h1 непосредственно внутри body (body > h1),как например было у меня, то mmenu их пропустит и будет оборачивать div'ы которые за ним. Это я решил просто оборачиванием в div всех других тегов, так чтобы непосредственно внутри body остались только div'ы.

На этом у меня всё заработало. Надеюсь эта статья оказалась вам полезна.