fantazer
6/11/2017 - 4:10 PM

Slide menu

Мобильное боковое меню --self

.head-toggle.js-slide-block-toggle(data-menu="menu")
	+icon("menu","icon icon-open")
	+icon("cancel","icon icon-close")

.slide-block.slide-block--left.slide-block--menu(data-menu="menu")
	.slide-block-wrap
		.slide-nav
			-
				var items = [
					{name: "Сеты", id: "#cat-set"},
					{name: "Шашлык", id: "#cat-grill"},
					{name: "Люля-кебаб", id: "#cat-luly"},
					{name: "Шаурма", id: "#cat-shaurma"},
					{name: "Денер", id: "#cat-dener"},
					{name: "Бурум", id: "#cat-burum"},
					{name: "Гирос", id: "#cat-giros"},
					{name: "Напитки", id: "#cat-drink"},
					{name: "Десерты", id: "#cat-cake"},
				];
			each item in items
				a(href = item.id rel = 'm_PageScroll2id' ).slide-nav__el #{item.name}
// slider menu
.head-toggle
	flex(mid)
	cp()
	margin-right: 10px
	+above(1025px)
		display: none
	.icon
		+below(640px)
			size 20px
		size 25px
		fill black
	.icon-close
		display: none
		
.head-toggle.slide-block-toggle--open
	.icon-close
		display: block
	.icon-open
		display: none

.slide-block
	+below(640px)
		top 60px
		height: calc(100% - 60px) // Высота шапки
	+below(480px)
		width: 100%
	position: fixed
	top 60px // Высота шапки
	width: 360px
	tr(all)
	height: calc(100% - 60px) // Высота шапки
	z-index 100

.slide-block--left
	left 0
	transform translateX(-100%)

.slide-block--right
	right 0
	transform translateX(100%)

.slide-block--open
	transform translateX(0%)
	
// slider menu === end
// slide menu
$('.js-slide-block-toggle').click(function (event) {
	$(".js-slide-block-toggle").not(this).removeClass('slide-block-toggle--open');
	var current = $(this).data("menu");
	$(".slide-block").each(function () {
		if ($(this).data("menu") === current) {
			$(this).toggleClass("slide-block--open")
		} else {
			$(this).removeClass("slide-block--open")
		}
	})
	$(this).toggleClass('slide-block-toggle--open');
});
// slide menu === end