YakovSPb/mmenu.js

## mmenu.js
//1 БЫСТРОЕ МЕНЮ
//БЫСТРОЕ МОБИЛЬНОЕ МЕНЮ//

HTML
<a class="gumburger"><i class="fa fa-bars"></i></a>

делаем дубликат меню ul и добавляем класс m-menu перед body
и делаем первым в списке пункт
<li class="close-menu">&times;</li>

CSS
/скрываем меню
.top_menu
 display: none

//Mobile menu//
.gumburger
	display: none
	position: fixed
	right: 30px
	top: 20px
	font-size: 30px
	cursor: pointer

.m-menu
	margin: 0
	position: fixed
	right: 0
	top: 0
	height: 100vh
	width: 100%
	display: flex
	flex-direction: column
	align-items: center
	justify-content: center
	list-style-type: none
	font-size: 30px
	line-height: 60px
	background-color: #960794
	z-index: 1000
	transform: translateX(100%)
	transition: .5s ease
	a
		color: #fff
		text-decoration: none
.m-menu__active
	transform: translateX(0)
.close-menu
	position: fixed
	right: 30px
	top: 25px
	margin: 0
	font-size: 50px
	font-weight: 900
	cursor: pointer


@media only screen and (max-width : 1200px)
	.top_menu
		display: none
	.gumburger
		display: block

JS
const link = document.getElementsByClassName('gumburger')
const close = document.getElementsByClassName('menu__item--close')
const menu = document.getElementsByClassName('menu')

link[0].addEventListener('click', event => {
    event.preventDefault()
    menu[0].classList.add('menu--active')
    link[0].style.display = 'none'

})
close[0].addEventListener('click', event => {
    event.preventDefault()
    menu[0].classList.remove('menu--active')
    link[0].style.display = 'block'
        })
 // jQUERY
        // const link = $('.gumburger');
        // const close = $('.close-menu');
        // const menu = $('.m-menu');
        // link.on('click', function(event){
        //     event.preventDefault();
        //     menu.toggleClass('m-menu__active')
        // });
        // close.on('click', function(event){
        //     event.preventDefault();
        //     menu.toggleClass('m-menu__active')
        // });


////////////////ГАМБУРГЕР\\\\\\\\\\\\\
1. npm i hamburgers
2. Подключаем стили
@import "hamburgers/_sass/hamburgers/hamburgers.scss"
2. Выбираем https://jonsuh.com/hamburgers/
3. Вставляем в правом верхнем углу
<a href="#my-menu" class="hamburger hamburger--emphatic">
	<span class="hamburger-box"><span class="hamburger-inner"></span></span>
</a>
4. Пишем стили
.hamburger
	position: absolute
	top: 12px
	right: 10px
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before
	background-color: #fff

////////////////Mmenu//////////////////////


1. bower i mmenu
2. js подключаем в gulpfile.js
'app/libs/jQuery.mmenu/dist/jquery.mmenu.all.js'
3. css подключаем в libs.sass
@import '../libs/jQuery.mmenu/dist/jquery.mmenu.all.css'
4. Заходим в документацию
https://mmenujs.com/tutorials/off-canvas/the-page.html


5. Пишем в Js
    var windowWidth = $(window).width();
    if(windowWidth < 1200){

        $('#my-menu').mmenu({
            extensions: ['theme-black', 'effect-menu-slide', 'pagedim-black', 'position-right'],
            navbar: {
                title: '<div class="logo">Gustoso</div>'
            }
        });
    }

    var api = $("#my-menu").data("mmenu");
    api.bind('open:finish', function () {
        $('.hamburger').toggleClass('is-active');
    }).bind('close:finish', function () {
        $('.hamburger').removeClass('is-active');
    });


6. Пишем стили

//Mobile menu
.hamburger
	position: absolute
	display: none
	top: 12px
	right: 10px
	z-index: 10
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before
	background-color: #fff
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before
	background-color: #fff
.mm-navbar
	position: relative
	border: none
	.mm-navbar__title
		padding: 0
		.logo
			color: #ffffff
			line-height: 40px
			margin-bottom: 20px
.mm-panel::after, .mm-panel::before
	height: 0

.mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview
	margin: 0

html.mm-opened
	overflow-y: scroll
.mm-panels > .mm-panel.mm-hasnavbar
	right: -18px

.mm-listitem::after
	display: none
.mm-panels, .mm-panels > .mm-panel
	top: -15px

.mm-panel
  padding:
    left: 0
    right: 0
.mm-listview
	> li
		> a
			padding:
				left: 10%
				right: 10%
				top: 5px
			&::before
				content: '\f005'
				font-family: 'FontAwesome'
				margin-right: 20px
				color: #ffffff
		&.active
			&>a
				color: $accent
.mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview
	margin-top: 30px
//END MOBILE MENU//


////////////////////ЕЩЕ МЕНЮ
https://codepen.io/CreativeJuiz/pen/oCBxz

1.Вставляем кнопку <a href="#" class="toggle-mnu hidden-md hidden-lg"><span></span></a>

2. Вставляем js
	$(".toggle-mnu").click(function () {
		$(this).toggleClass("on");
		$(".line-menu").slideToggle();
	});


3. Пишем стили

.toggle-mnu
  display: block
  position: absolute
  right: 30px
  top: 10px
  float: right
  color: red
  padding: 10px 6px
  width: 40px
  height: 40px

.toggle-mnu span:after,
.toggle-mnu span:before
  content: ""
  position: absolute
  left: 0
  top: -9px

.toggle-mnu span:after
  top: 9px

.toggle-mnu span
  position: relative
  display: block

.toggle-mnu span,
.toggle-mnu span:after,
.toggle-mnu span:before
  width: 100%
  height: 5px
  background-color: #888
  transition: all 0.3s
  backface-visibility: hidden
  border-radius: 2px

.toggle-mnu.on span
  background-color: transparent

.toggle-mnu.on span:before
  transform: rotate(45deg) translate(5px, 5px)

.toggle-mnu.on span:after
  transform: rotate(-45deg) translate(7px, -8px)

.toggle-mnu.on + #menu
  opacity: 1
  visibility: visible


------------------
1. Подключаем меню плагином
пишем в комстроке
bower i superfish
2. В libs.sass пишем
@import "../app/libs/superfish/dist/css/superfish"


Мобильное меню
1. https://gist.github.com/ramzs/65ee2174c1aa17208bc3#file-mobile-menu-toggle-button-markdown
2. пишем в комстроке bower i mmenu
https://mmenu.frebsite.nl/tutorials/off-canvas/
3. Удаляем все в jQuery.mmenu кроме папки dist
4. подключаем в libs.sass @import "../app/libs/jQuery.mmenu/dist/jquery.mmenu.all.css"
5. В gulpfile подключаем './app/libs/jQuery.mmenu/dist/jquery.mmenu.all.js',


// HTML MENU
<nav class="menu header__menu">
						<ul class="menu__list">
							<li class="menu__item menu-item--close"><img src="img/cross_icon.svg" alt=""></li>
							<li class="menu__item menu__item--hassubmenu"><a class="menu__link" href="">О центре</a>
								<ul class="menu__submenu">
									<li class="menu__sub-item"><a class="menu__sub-link" href="">История</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Структура</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Документы</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Реквизиты</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Благодарственные письма</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Профсоюзная организация</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Работа и стажировка</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Область акредитации</a></li>
								</ul>
							</li>
							<li class="menu__item menu__item--hassubmenu menu__item--active"><a class="menu__link" href="">Услуги</a>
								<ul class="menu__submenu">
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Метрология</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Испытания</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Подтверждение соответствия</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Аттестация испытательного оборудования</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Оценка состояния измерений</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Производство стандартных образцов</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Узлы учета энергоресурсов</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Межлабораторные сличительные испытания</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Иструментальный контроль технического состояния изделий медицинской техники</a></li>
									<li class="menu__sub-item"><a class="menu__sub-link" href="">Ремонт оптико-механических приборов</a></li>
								</ul>
							</li>
							<li class="menu__item"><a class="menu__link" href="">Конкурсы</a></li>
							<li class="menu__item"><a class="menu__link" href="">Новости</a></li>
							<li class="menu__item menu__item--hassubmenu"><a class="menu__link" href="">Обратная связь</a>
							<ul class="menu__submenu">
								<li class="menu__sub-item"><a class="menu__sub-link" href="">FAQ</a></li>
								<li class="menu__sub-item"><a class="menu__sub-link" href="">Жалобы, предложения</a></li>
							</ul>
							</li>
							<li class="menu__item"><a class="menu__link" href="">Контакты</a></li>
							<li class="menu__item menu__item--social">
								<a class="menu__link menu__item--social_link" href=""><img src="img/phone_icon.svg" alt=""></a>
								<a class="menu__link menu__item--social_link" href=""><img src="img/email_icon.svg" alt=""></a>
							</li>
						</ul>
					</nav>


//CSS
// HEADER MENU
.menu-item--close
	display: none
.menu
	font-size: 18px
	font-weight: 700
	&__item--active
		.menu__link
			background: $accent
			color: #fff
	&__list
		list-style-type: none
		display: -webkit-flex
		display: -moz-flex
		display: -ms-flex
		display: -o-flex
		display: flex
		padding-left: 0
	&__item
		padding: 23px 5px 28px 5px
		position: relative
		&:hover
			.menu__submenu
				display: block
	&__link
		padding: 5px 8px
		border-radius: 10px
		color: $accent
		text-transform: uppercase
		transition: .3s all ease
		&:hover
			text-decoration: none
			background: $accent
			color: #fff
	&__submenu
		position: absolute
		width: 207px
		top: 55px
		left: 5px
		background-color: $gray
		border-radius: 10px
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
		z-index: 1000
		list-style-type: none
		padding: 10px 0
	&__sub-item
		margin-left: 0
		margin-bottom: 10px
		&:hover
			display: block
	&__submenu
		display: none
	&__sub-item
		margin-bottom: 0
		padding: 0 9px
		transition: all .3s ease
		&:hover
			background: $accent
			color: #fff
			.menu__sub-link
				color: #fff
				text-decoration: none
	&__sub-link
		text-transform: uppercase
		color: $accent
		font-size: 16px
		display: block
		transition: all .3s ease


========================================
	//1 БЫСТРОЕ МЕНЮ
	//БЫСТРОЕ МОБИЛЬНОЕ МЕНЮ//

	HTML
	<a class="gumburger"><i class="fa fa-bars"></i></a>

	делаем дубликат меню ul и добавляем класс m-menu перед body
	и делаем первым в списке пункт
	<li class="close-menu">×</li>

	CSS
	/скрываем меню
	.top_menu
	display: none

	//Mobile menu//
	.gumburger
	display: none
	position: fixed
	right: 30px
	top: 20px
	font-size: 30px
	cursor: pointer

	.m-menu
	margin: 0
	position: fixed
	right: 0
	top: 0
	height: 100vh
	width: 100%
	display: flex
	flex-direction: column
	align-items: center
	justify-content: center
	list-style-type: none
	font-size: 30px
	line-height: 60px
	background-color: #960794
	z-index: 1000
	transform: translateX(100%)
	transition: .5s ease
	a
	color: #fff
	text-decoration: none
	.m-menu__active
	transform: translateX(0)
	.close-menu
	position: fixed
	right: 30px
	top: 25px
	margin: 0
	font-size: 50px
	font-weight: 900
	cursor: pointer


	@media only screen and (max-width : 1200px)
	.top_menu
	display: none
	.gumburger
	display: block

	JS
	const link = document.getElementsByClassName('gumburger')
	const close = document.getElementsByClassName('menu__item--close')
	const menu = document.getElementsByClassName('menu')

	link[0].addEventListener('click', event => {
	event.preventDefault()
	menu[0].classList.add('menu--active')
	link[0].style.display = 'none'

	})
	close[0].addEventListener('click', event => {
	event.preventDefault()
	menu[0].classList.remove('menu--active')
	link[0].style.display = 'block'
	})
	// jQUERY
	// const link = $('.gumburger');
	// const close = $('.close-menu');
	// const menu = $('.m-menu');
	// link.on('click', function(event){
	// event.preventDefault();
	// menu.toggleClass('m-menu__active')
	// });
	// close.on('click', function(event){
	// event.preventDefault();
	// menu.toggleClass('m-menu__active')
	// });






	////////////////ГАМБУРГЕР\\\\\\\\\\\\\
	1. npm i hamburgers
	2. Подключаем стили
	@import "hamburgers/_sass/hamburgers/hamburgers.scss"
	2. Выбираем https://jonsuh.com/hamburgers/
	3. Вставляем в правом верхнем углу
	<a href="#my-menu" class="hamburger hamburger--emphatic">
	<span class="hamburger-box"><span class="hamburger-inner"></span></span>
	</a>
	4. Пишем стили
	.hamburger
	position: absolute
	top: 12px
	right: 10px
	.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before
	background-color: #fff

	////////////////Mmenu//////////////////////


	1. bower i mmenu
	2. js подключаем в gulpfile.js
	'app/libs/jQuery.mmenu/dist/jquery.mmenu.all.js'
	3. css подключаем в libs.sass
	@import '../libs/jQuery.mmenu/dist/jquery.mmenu.all.css'
	4. Заходим в документацию
	https://mmenujs.com/tutorials/off-canvas/the-page.html


	5. Пишем в Js
	var windowWidth = $(window).width();
	if(windowWidth < 1200){

	$('#my-menu').mmenu({
	extensions: ['theme-black', 'effect-menu-slide', 'pagedim-black', 'position-right'],
	navbar: {
	title: '<div class="logo">Gustoso</div>'
	}
	});
	}

	var api = $("#my-menu").data("mmenu");
	api.bind('open:finish', function () {
	$('.hamburger').toggleClass('is-active');
	}).bind('close:finish', function () {
	$('.hamburger').removeClass('is-active');
	});


	6. Пишем стили

	//Mobile menu
	.hamburger
	position: absolute
	display: none
	top: 12px
	right: 10px
	z-index: 10
	.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before
	background-color: #fff
	.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before
	background-color: #fff
	.mm-navbar
	position: relative
	border: none
	.mm-navbar__title
	padding: 0
	.logo
	color: #ffffff
	line-height: 40px
	margin-bottom: 20px
	.mm-panel::after, .mm-panel::before
	height: 0

	.mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview
	margin: 0

	html.mm-opened
	overflow-y: scroll
	.mm-panels > .mm-panel.mm-hasnavbar
	right: -18px

	.mm-listitem::after
	display: none
	.mm-panels, .mm-panels > .mm-panel
	top: -15px

	.mm-panel
	padding:
	left: 0
	right: 0
	.mm-listview
	> li
	> a
	padding:
	left: 10%
	right: 10%
	top: 5px
	&::before
	content: '\f005'
	font-family: 'FontAwesome'
	margin-right: 20px
	color: #ffffff
	&.active
	&>a
	color: $accent
	.mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview
	margin-top: 30px
	//END MOBILE MENU//









	////////////////////ЕЩЕ МЕНЮ
	https://codepen.io/CreativeJuiz/pen/oCBxz

	1.Вставляем кнопку <a href="#" class="toggle-mnu hidden-md hidden-lg"><span></span></a>

	2. Вставляем js
	$(".toggle-mnu").click(function () {
	$(this).toggleClass("on");
	$(".line-menu").slideToggle();
	});


	3. Пишем стили

	.toggle-mnu
	display: block
	position: absolute
	right: 30px
	top: 10px
	float: right
	color: red
	padding: 10px 6px
	width: 40px
	height: 40px

	.toggle-mnu span:after,
	.toggle-mnu span:before
	content: ""
	position: absolute
	left: 0
	top: -9px

	.toggle-mnu span:after
	top: 9px

	.toggle-mnu span
	position: relative
	display: block

	.toggle-mnu span,
	.toggle-mnu span:after,
	.toggle-mnu span:before
	width: 100%
	height: 5px
	background-color: #888
	transition: all 0.3s
	backface-visibility: hidden
	border-radius: 2px

	.toggle-mnu.on span
	background-color: transparent

	.toggle-mnu.on span:before
	transform: rotate(45deg) translate(5px, 5px)

	.toggle-mnu.on span:after
	transform: rotate(-45deg) translate(7px, -8px)

	.toggle-mnu.on + #menu
	opacity: 1
	visibility: visible






	------------------
	1. Подключаем меню плагином
	пишем в комстроке
	bower i superfish
	2. В libs.sass пишем
	@import "../app/libs/superfish/dist/css/superfish"



	Мобильное меню
	1. https://gist.github.com/ramzs/65ee2174c1aa17208bc3#file-mobile-menu-toggle-button-markdown
	2. пишем в комстроке bower i mmenu
	https://mmenu.frebsite.nl/tutorials/off-canvas/
	3. Удаляем все в jQuery.mmenu кроме папки dist
	4. подключаем в libs.sass @import "../app/libs/jQuery.mmenu/dist/jquery.mmenu.all.css"
	5. В gulpfile подключаем './app/libs/jQuery.mmenu/dist/jquery.mmenu.all.js',



	// HTML MENU
	<nav class="menu header__menu">
	<ul class="menu__list">
	<li class="menu__item menu-item--close"><img src="img/cross_icon.svg" alt=""></li>
	<li class="menu__item menu__item--hassubmenu"><a class="menu__link" href="">О центре</a>
	<ul class="menu__submenu">
	<li class="menu__sub-item"><a class="menu__sub-link" href="">История</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Структура</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Документы</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Реквизиты</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Благодарственные письма</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Профсоюзная организация</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Работа и стажировка</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Область акредитации</a></li>
	</ul>
	</li>
	<li class="menu__item menu__item--hassubmenu menu__item--active"><a class="menu__link" href="">Услуги</a>
	<ul class="menu__submenu">
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Метрология</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Испытания</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Подтверждение соответствия</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Аттестация испытательного оборудования</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Оценка состояния измерений</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Производство стандартных образцов</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Узлы учета энергоресурсов</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Межлабораторные сличительные испытания</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Иструментальный контроль технического состояния изделий медицинской техники</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Ремонт оптико-механических приборов</a></li>
	</ul>
	</li>
	<li class="menu__item"><a class="menu__link" href="">Конкурсы</a></li>
	<li class="menu__item"><a class="menu__link" href="">Новости</a></li>
	<li class="menu__item menu__item--hassubmenu"><a class="menu__link" href="">Обратная связь</a>
	<ul class="menu__submenu">
	<li class="menu__sub-item"><a class="menu__sub-link" href="">FAQ</a></li>
	<li class="menu__sub-item"><a class="menu__sub-link" href="">Жалобы, предложения</a></li>
	</ul>
	</li>
	<li class="menu__item"><a class="menu__link" href="">Контакты</a></li>
	<li class="menu__item menu__item--social">
	<a class="menu__link menu__item--social_link" href=""><img src="img/phone_icon.svg" alt=""></a>
	<a class="menu__link menu__item--social_link" href=""><img src="img/email_icon.svg" alt=""></a>
	</li>
	</ul>
	</nav>


	//CSS
	// HEADER MENU
	.menu-item--close
	display: none
	.menu
	font-size: 18px
	font-weight: 700
	&__item--active
	.menu__link
	background: $accent
	color: #fff
	&__list
	list-style-type: none
	display: -webkit-flex
	display: -moz-flex
	display: -ms-flex
	display: -o-flex
	display: flex
	padding-left: 0
	&__item
	padding: 23px 5px 28px 5px
	position: relative
	&:hover
	.menu__submenu
	display: block
	&__link
	padding: 5px 8px
	border-radius: 10px
	color: $accent
	text-transform: uppercase
	transition: .3s all ease
	&:hover
	text-decoration: none
	background: $accent
	color: #fff
	&__submenu
	position: absolute
	width: 207px
	top: 55px
	left: 5px
	background-color: $gray
	border-radius: 10px
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
	z-index: 1000
	list-style-type: none
	padding: 10px 0
	&__sub-item
	margin-left: 0
	margin-bottom: 10px
	&:hover
	display: block
	&__submenu
	display: none
	&__sub-item
	margin-bottom: 0
	padding: 0 9px
	transition: all .3s ease
	&:hover
	background: $accent
	color: #fff
	.menu__sub-link
	color: #fff
	text-decoration: none
	&__sub-link
	text-transform: uppercase
	color: $accent
	font-size: 16px
	display: block
	transition: all .3s ease



	========================================