Довольно часто при вёрстке макета сайта дизайнеры предоставляют макет ориентированный только на desktop-ные устройства, при этом на сайте требуется реализовать адаптивность с мобильным меню. Давайте рассмотрим один очень мощный jQuery плагин который позволяет сделать это максимально быстро и качественно, он имеет массу настроек и легко стилизуется под внешний вид сайта, этот плагин jQuery MMenu.
Подготовка макета и интеграция плагина
Первым делом необходимо скачать плагин и подключить к странице js и css файлы плагина:
- jquery.mmenu.all.min.js
- jquery.mmenu.all.css
Затем необходимо поместить всё содержимое тега <body> в специальный контейнер:
|
1 2 3 4 5 |
<body> <div id="page"> ...тут вся остальная вёрстка ... </div> <!-- end page id --> </body> |
Добавляем вниз страницы само мобильное меню (внутри вышеописанного тега #page):
|
1 2 3 4 5 6 |
<nav id="menu"> <ul> <li><a href="#">Home</a></li> ... </ul> </nav> |
Теперь добавляем кнопку вызова (открытия) мобильного меню, её необходимо вставить перед тегом #page:
|
1 2 3 4 |
<div class="header-mmenu"> <a href="#menu"></a> Меню </div> |
С такими стилями:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/*Стили для кнопки вызова меню*/ .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; } |
Почти всё готово. Осталось наполнить мобильное меню пунктами и запустить сам скрипт. Я предлагаю создавать его на лету, т.е. в зависимости от страницы вы сможете сформировать меню нужной структуры просто считав возвращаемое модулями сайта меню.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//Создание адаптивного меню налету 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 }, }); |
Готово! Получаем примерно такой результат:
Думаю не стоит напоминать за то, что стили для мобильного меню должны быть привязаны к
Есть другие варианты стилей для этого меню, например можно сделать кнопку гамбургера анимированной. Изменим саму кнопку:
|
1 |
<a id="hamburger" class="mm-slideout" href="#menu"><i><span></span></i></a> |
И параметры запуска mmenu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$('#menu').mmenu({ extensions: [ "theme-black"], counters: true, dividers: { fixed: true }, navbar: { title: 'Меню:' }, navbars: [{ position: 'top', content : ['searchfield'] }] }); |
А так же стили: jquery.mmenu.css
Работу данного примера можно посмотреть на этом сайте
Заключение
У рассмотренного плагина существует масса дополнительных настроек, их рассмотрение выходит за рамки данной статьи. Но вы сможете самостоятельно найти все примеры в документации и настроить своё меню максимально удобным для посетителей. Желаю удачи!
Оставьте первый комментарий!