Довольно часто при вёрстке макета сайта дизайнеры предоставляют макет ориентированный только на 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

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

Демо

Заключение

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

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

Вам также могут понравиться

Современные способы заработка на сайтах

Современные способы заработка на сайтах

Не для кого не секрет, что в современном мире вы можете зарабатывать определённые деньги на своём сайте ничего не продавая. Говоря «ничего не продавая», я имею ввиду классическую схему, когда вы продаёте свои услуги, перепродаёте товар (предварительно закупая или используя схемы прямой поставки «дроп-шиппинга») или что-то производите. В статье рассмотрим методы, которые не требуют от вас подобных действий. И так, рассмотрим основные методы в порядке возрастания их сложности и времени которое требуется от владельца сайта.

Пользовательский тип свойств инфоблока в 1С Битрикс

Пользовательский тип свойств инфоблока в 1С Битрикс

В дополнение к статье о создании собственного типа пользовательских полей хочу рассказать как делать аналогичные свойства для информационных блоков, т.к. эти свойства относятся к другому модулю, а именно «информационные блоки» (iblock).

Условные операторы в PHP

Условные операторы в PHP

Добрались до логики выполнения программы. И так условные операторы (по другому операторы ветвления) позволяют нам организовать определённое поведение программы в зависимости от входных параметров (данных вводимых пользователем, результатом работы вспомогательных функций). Вся логика в языках программирования основана на Алгебре Буля. 

Комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке

Самые читаемые

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Одним из преимуществ интернет-магазинов на 1С Битрикс на мой взгляд является наличие не так давно до...

Основы SEO оптимизации сайта

Основы SEO оптимизации сайта

Эта статья не истина в последней инстанции, а лишь набор правил которые я применяю при создании/испр...

Собственный тип пользовательских полей в 1С Битрикс

Собственный тип пользовательских полей в 1С Битрикс

Для решения некоторых задач порой не хватает стандартного набора пользовательских полей поставляемых...