Адаптивные меню, сворачивающиеся в гамбургер на мобильных устройствах, сейчас можно видеть практически на любом сайте. Сделать такое меню очень просто, но каждый сайт индивидуален, и не всегда можно обойтись таким гамбургером.

В этой статье мы покажем как сделать мобильное меню красивей и подходящим для любых сайтов. Как будет выглядеть меню зависит от вас и от сайта, если постараться то можно оформить в таком стиле.

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

И так начнем, сперва нам нужно подключить плагин $.menu. Этот плагин делает так, чтобы меню выскакивало слева, как на картинке выше.

Подключение
Подключаем css:

<link rel="stylesheet" href="vendor/mobile-menu/menu.css">

Подключаем js:

<script src="vendor/mobile-menu/menu.js"></script>

Немного HTML
На втором шаге нам нужно добавить само меню, а именно то что будет внутри контейнера. Класс .hide нужен чтобы меню не было видно на странице.

<div class="hide">
	<div class="mmenu-inside" id="mobile-menu">
		<div class="mmenu-head">
			<a href="/">
				<img src="img/logo.png">
			</a>
		</div>
		<div class="mmenu-body">
			<ul>
				<li><a href="/">Home</a></li>
				<li><a href="">Item 1</a></li>
				<li><a href="">Item 2</a></li>
				<li><a href="">Item 3</a></li>
				<li><a href="">Item 4</a></li>
				<li><a href="">Item 5</a></li>
			</ul>
		</div>
	</div>
</div>

Немного CSS
Оформим наше меню, сделаем так же как и в приложениях.

.mmenu-inside{
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.mmenu-head{
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: 200px;
	background: #ddd;
}
.mmenu-body{
	overflow: hidden;
	flex-grow: 1;
}
.mmenu-head,.mmenu-body{
	padding: 15px;
}

Финал
Запусти плагин инициализации меню, добавим туда где запускаются все ваши плагины.

$(function(){
	$('#mobile-menu').menu();

//#mobile-menu-toggle ваша кнопка которая должна открыть меню

$('#mobile-menu-toggle').on('click',function(e){
	e.preventDefault();

	$('#mobile-menu').menu('open');
})
})

Заключение
Ну вот и все, не чего сложно правда? В такое меню можно вместить любой контент, не только ссылки, но и контакты, форму поиска, аккаунт и тд.

Скачать сам плагин можно по этой ссылки.