Создаём мобильное меню сайта при помощи плагина jQuery MMenu

Оглавление

Подготовка макета и интеграция плагина
Стилизация mmenu
Заключение

Довольно часто при вёрстке макета сайта дизайнеры предоставляют макет ориентированный только на desktop-ные устройства, при этом на сайте требуется реализовать адаптивность с мобильным меню. Давайте рассмотрим один очень мощный jQuery плагин который позволяет сделать это максимально быстро и качественно, он имеет массу настроек и легко стилизуется под внешний вид сайта, этот плагин jQuery MMenu.

Подготовка макета и интеграция плагина

Первым делом необходимо скачать плагин и подключить к странице js и css файлы плагина:

jquery.mmenu.all.min.js
jquery.mmenu.all.css

Затем необходимо поместить всё содержимое тега <body> в специальный контейнер:


<body>
    <div id="page"> 
    ...тут вся остальная вёрстка ...
    </div> <!-- end page id -->
</body>

Добавляем вниз страницы само мобильное меню (внутри вышеописанного тега #page):


<nav id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		...
	</ul>	
</nav>

Теперь добавляем кнопку вызова (открытия) мобильного меню, её необходимо вставить перед тегом #page:


<div class="header-mmenu">
    <a href="#menu"></a>
    Меню
</div>

С такими стилями:


/*Стили для кнопки вызова меню*/

.header-mmenu {
	background: #777;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 40px;

	/*display: none;*/
	
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	height: 40px;
	padding: 0 50px;
	
	position: fixed;
    top: 0px;
    z-index: 1000;
}

.header-mmenu.fixed {
	position: fixed;
	top: 0;
	left: 0;
}

.footer.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
}

.header-mmenu a {
	background: center center no-repeat transparent;
	background-image: url('../img/mmenu_btn.png');
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 10px;
}

Почти всё готово. Осталось наполнить мобильное меню пунктами и запустить сам скрипт. Я предлагаю создавать его на лету, т.е. в зависимости от страницы вы сможете сформировать меню нужной структуры просто считав возвращаемое модулями сайта меню.


//Создание адаптивного меню налету
var topMenu = $('.top-menu').html(); //.top-menu - это класс меню которое отдаёт нам сервер на живом сайте, то что видно на desktop-варианте сайта
topMenu = topMenu.replace(/class="[^"]*"/gi, "").replace(/style="[^"]*"/gi, "").replace(/id="[^"]*"/gi, ""); //Зачищаем всякую хрень	
$('nav#menu').html('<ul>'+topMenu+'</ul>');
	
//Запускаем mmenu
$('nav#menu').mmenu({
	extensions: ["effect-menu-slide", "effect-listitems-slide"],
	navbars     : [{
		height  : 3,
		title   : 'Меню',
		content : ['']
	}, true],
	counters: true,
	dividers: {
		fixed 	: true
	},
});

Готово!

Думаю не стоит напоминать за то, что стили для мобильного меню должны быть привязаны к

Стилизация mmenu

Есть другие варианты стилей для этого меню, например можно сделать кнопку гамбургера анимированной. Изменим саму кнопку:


<a id="hamburger" class="mm-slideout" href="#menu"><i><span></span></i></a>

И параметры запуска mmenu:


$('#menu').mmenu({
	extensions: [ "theme-black"],
	counters: true,
	dividers: {
		fixed: true
	},
	navbar: {
		title: 'Меню:'
	},
	navbars: [{
		position: 'top',
		content : ['searchfield']
	}]
});

А так же стили: jquery.mmenu.css

Работу данного примера можно посмотреть на этом сайте

Демо

Заключение

У рассмотренного плагина существует масса дополнительных настроек, их рассмотрение выходит за рамки данной статьи. Но вы сможете самостоятельно найти все примеры в документации и настроить своё меню максимально удобным для посетителей. Желаю удачи!

Спсиок файлов к статье (исходники)