Запускаем чистый шаблон gulp.
Подключим плагин mmenu к проекту в gulpfile.js файл jquery.mmenu.all.min.js и файл стилей jquery.mmenu.all в libs.sass.
Второй плагин, который понадобится это hamburgers.
Его подключаем
в libs.sass.
Скачать два плагина можно по ссылке скачать mmenu или перейти на сайты плагинов и выбрать download.
Содержание статьи
Напишем код для html
Есть стандартная структура mmenu в html.
Состоит из дива с id=my-page, внутри вложены дивы
- my-header
- my-content
- my-footer
Создадим шапку сайта и добавим в нее mmenu.
Всю шапку можно взять в класс site-header.
Внутри будет класс top-line, в котором будет находиться hamburger.
Кнопка меню будет в теге a, которая будет ссылаться на #my-menu с разделами меню.
Зададим класс hamburger.
У hamburger есть дополнительные классы с разной анимацией как на картинке.
Выберем анимацию hamburger-emphatic и добавим два span, как на сайте hamburger.
Теперь если зайдем в браузер, то увидим иконку hamburger.
Следующим шагом сделаем открывающиеся по hamburger меню.
Под тегом ссылки сделаем каркас меню.
Он состоит из тега навигации nav с id my-menu.
Внутри делаем пустые ссылки на меню.
Сделаем активным active третий пункт, например.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="my-page"> <div id="my-header"> <header class="site-header"> <div class="top-line"> <a href="#my-menu" class="hamburger hamburger--emphatic"> <span class="hamburger-box"><span class="hamburger-inner"></span></span> </a> <nav id="my-menu"> <ul> <li><a href="#">1list</a></li> <li><a href="#">2list</a></li> <li class="active"><a href="#">3list</a></li> </ul> </nav> </div> </header> </div> <div id="my-content"></div> <div id="my-footer"></div> </div> |
Зайдем в файл common.js.
Плагин mmenu мы должны применить к id my-menu, которое является оберткой для всего меню.
Сперва пишем селектор $(#my-menu) мы выбираем его на странице, затем применяем плагин .mmenu ().
- Зададим параметры плагину в фигурных скобках с новой строки extensions.
- widescreen
- theme-black параметр делаем меню темным.
- effect-menu-slide эффект плавно выезжает меню.
- 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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { $('#my-menu').mmenu({ extensions: [ 'widescreen', 'theme-black', 'effect-menu-slide', 'pagedim-black' ], navbar: { title: '<img src="img/logo.svg" alt="">' }, offCanvas: { position : 'right' } }); var api = $('#my-menu').data('mmenu'); api.bind('opened', function () { $('.hamburger').addClass('is-active'); }).bind('closed', function () { $('.hamburger').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 как на картинке.
Укажем, что шрифт font-family: fontawesome.
Сделаем отступ иконок margin-right: 10px.
Код стилей в main.sass.
|
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
body font-size: 16px min-width: 320px position: relative line-height: 1.75 font-family: $default-font overflow-x: hidden opacity: 1 &.ishome .site-header min-height: 500px height: 100vh background-color: #c3c3c3 .top-line padding-top: 40px position: absolute width: 100% z-index: 1 html.mm-opened overflow-y: scroll !important body background-color: #c3c3c3 .mm-panels > .mm-panel.mm-hasnavbar right: -18px .mm-menu.mm-theme-black background-color: #c9c9c9 .mm-listview>li:not(.mm-divider):after display: none .mm-panels>.mm-panel>.mm-listview:first-child, .mm-panels>.mm-panel>.mm-navbar+.mm-listview margin-top: 0 .hamburger-box width: 34px .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before border-radius: 0 background-color: #fff height: 2px width: 34px .mm-menu.mm-theme-black .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu.mm-theme-black .mm-listview > li.mm-selected > span background-color: transparent color: red .mm-panels>.mm-panel:after, .mm-panels>.mm-panel:before height: 0 .mm-listview>li>a padding: left: 20% right: 20% top: 10px bottom: 10px transition: color .25s ease &:hover color: blue &::before color: green &::before transition: color .25s ease content: '\f11c' font-family: fontawesome margin-right: 10px text-decoration: none font-size: 12px color: #fff .mm-listview>li.active &>a color: red &::before color: red .hamburger right: 0 top: 34px position: absolute .mm-navbar height: auto border: none position: s .mm-title padding: 0 |
