Август 2017
Автор: Рубрика: Верстка Комментариев нет

Делаем выезжающее меню плагином mmenu в стиле hamburger


Делаем выезжающее меню плагином mmenu в стиле hamburger

Запускаем чистый шаблон gulp.

Подключим плагин mmenu к проекту в gulpfile.js файл jquery.mmenu.all.min.js и файл стилей jquery.mmenu.all в libs.sass.

Второй плагин, который понадобится это hamburgers.

Его подключаем
в libs.sass.

Скачать два плагина можно по ссылке скачать mmenu или перейти на сайты плагинов и выбрать download.

Подключим плагин mmenu к проекту в gulpfile.js

Напишем код для html

Есть стандартная структура mmenu в html.

Состоит из дива с id=my-page, внутри вложены дивы

  • my-header
  • my-content
  • my-footer

Создадим шапку сайта и добавим в нее mmenu.

Всю шапку можно взять в класс site-header.

Внутри будет класс top-line, в котором будет находиться hamburger.

Кнопка меню будет в теге a, которая будет ссылаться на #my-menu с разделами меню.

Зададим класс hamburger.

У hamburger есть дополнительные классы с разной анимацией как на картинке.

Зададим класс hamburger.

Выберем анимацию hamburger-emphatic и добавим два span, как на сайте hamburger.

Теперь если зайдем в браузер, то увидим иконку hamburger.

Следующим шагом сделаем открывающиеся по hamburger меню.

Под тегом ссылки сделаем каркас меню.

Он состоит из тега навигации nav с id my-menu.

Внутри делаем пустые ссылки на меню.

Сделаем активным active третий пункт, например.

Перейдем к инициализации плагина mmenu.

Зайдем в файл common.js.

Плагин mmenu мы должны применить к id my-menu, которое является оберткой для всего меню.

Сперва пишем селектор $(#my-menu) мы выбираем его на странице, затем применяем плагин .mmenu ().

  • Зададим параметры плагину в фигурных скобках с новой строки extensions.
  1. widescreen
  2. theme-black параметр делаем меню темным.
  3. effect-menu-slide эффект плавно выезжает меню.
  4. pagedim-black после того как меню выехало затемняется основной контент.
  • Navbar параметр для отображения логотипа сверху меню.
  • offCanvas этот параметр отвечает, с какой стороны будет выезжать меню, делаем справа position : right.

Сделаем анимацию для hamburger.

У mmenu есть свой api, к которому можно обращаться, чтобы производить действия или брать информацию.

Будем использовать api, чтобы сделать анимацию кнопки hamburger.

Кнопка будет менять свое состояние, в зависимости открыто или закрыто меню.

Добавляем новую переменную var api.

Берем селектор my-menu и атрибут data mmenu и производим действие api.bind определяем состояние открыто opened или закрыто closed.

Если открыто, то функция берем $(.hamburger) и добавляем класс addClass (is-active).

Если меню закрыто bind closed, то забираем класс removeClass (is-active).

Перейдем к стилизации hamburger.

Когда открывается меню, тегу html добавляется класс mm-opened.

Зададим стиль у html.mm-opened скролить мышкой overflow-y: scroll.

Сдвигаем mm-panels.

Чтобы убрать линии между li делаем mm-listview>li display: none.

Выделить активный пункт или выбранный добавим красный цвет у .mm-menu.mm-theme-black.

Задаем отступы в процентах для перечислений в меню .mm-listview>li>a.

Добавим анимацию цвета transition: color .25s при наведении, цвет сделаем например синий.

Добавим иконку клавиатура до пункта меню с помощью свойства content: \f11c.

Иконка из шрифта font awesome, чтобы посмотреть код content у иконка перейдем на сайт выделим иконку, которую хотим добавить и нажмем проинспектировать.

У класса иконки находим before как на картинке.

стилизации hamburger.

Укажем, что шрифт font-family: fontawesome.

Сделаем отступ иконок margin-right: 10px.

Код стилей в main.sass.

Проверяем открытие и закрытие mmenu в браузере

Проверяем открытие и закрытие mmenu в браузере

Комментариев нет