Skip to content

Мобильное меню для сайта на основе jQuery Mmenu

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

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

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

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

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

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

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

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

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

Готово! Получаем примерно такой результат:

Мобильное меню на основе jQuery Mmenu

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

Стилизация mmenu

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

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

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

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

Заключение

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

Понравилось? Поделись с друзьями:Share on VK
VK
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
ОпубликованоJavaScript

Оставьте первый комментарий!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Защита от ботов *

Оставляя комментарий на сайте, вы даёте согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности
© it-svalka.ru 2013 - 2020 г. - Копирование материалов сайта запрещено.