Мобильное меню для сайта на основе jQuery 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>

<body>

...тут вся остальная вёрстка ...

</div>

</body>

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

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

<ul>

...

</ul>

</nav>

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

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

Меню

</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;
}

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

.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
	},
});

//Создание адаптивного меню налету

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>

1	<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']
	}]
});

$('#menu').mmenu({

extensions: [ "theme-black"],

counters: true,

dividers: {

fixed: true

navbar: {

title: 'Меню:'

navbars: [{

position: 'top',

content : ['searchfield']

}]

});

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

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

Заключение

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