Врежем новое Гамбургер выезжающее МЕНЮ [mmenu] на главную страницу сайта:
Погнали...
Имеем прежнее ГЛАВНОЕ МЕНЮ:
поэтому, GO в исходники сайта:
Сносим старый <header> вместе с МЕНЮ
и меняем на новый <header>:
Причем внедрим конструкцию из ЗАРЕЗЕРВИРОВАННЫХ ТЭГОВ:
Код конструкции:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
* * <body> <div id="my-page"> <!-- my-page [START] for MMENU --> <div id="my-header"> <!-- my-header [START] for MMENU --> </div> <!-- my-header [END] for MMENU --> <div id="my-content"> <!-- my-content [START] for MMENU --> </div> <!-- my-content [END] for MMENU --> <div id="my-footer"> <!-- my-footer [START] for MMENU --> </div> <!-- my-footer [END] for MMENU --> </div> <!-- my-page [END] for MMENU --> </body> * * |
Далее, пропишем стили SASS [Для нового меню]:
ПРОПИСАЛИ))
Затем, КЛАДЕМ в
Папку \libs - CSS-стиль плагина hamburgers
Далее, нужно этот файл подключить:
Не забываем дописать сценарий:
КОД СЦЕНАРИЯ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
* * // СЛАЙДЕР МЕНЮ НА ГЛАВНОЙ ======================================== $('#my-menu').mmenu({ extensions:['widescreen', 'theme-dark', 'effect-menu-slide', 'pagedim-black'], navbar: { title: '<img src="img/img-fotograph/logo/logo-fotograph-white.svg" alt="Фотограф в Москве 8-926-674-52-25" />' }, offCanvas: { position: 'right' } }); var api = $('#my-menu').data('mmenu'); api.bind('opened', function() { $('.hamburger').addClass('is-active'); }).bind('closed', function() { $('.hamburger').removeClass('is-active'); }); // СЛАЙДЕР МЕНЮ НА ГЛАВНОЙ ======================================== * * |
И не забываем собственно сам плагин перенести в папку /libs
И затем подключаем его в Gulp - файле проекта!
