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--mdx")
				+icon("close","icon icon-close icon--mdx")
			h1 Главная страница
			.slide-block.slide-block--left(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
	cp()
	+above(1025px)
		display: none
	.icon-close
		display: none

.head-toggle
	&.active
		.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
	background: white
	&.active
		transform translateX(0%)
.slide-block--left
	left 0
	transform translateX(-100%)

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

.slide-nav__el
	display  block

.slide-block-wrap
	padding: 24px
// slider menu === end
	// slide menu
	var hideSlideMenu = function(el){
		$(".head-toggle").removeClass('active');
		$(".slide-block").removeClass("active");
	}
	$('.js-slide-block-toggle').click(function (event) {
		$(".js-slide-block-toggle").not(this).removeClass('active');
		var current = $(this).data("menu");
		$(".slide-block").each(function () {
			if ($(this).data("menu") === current) {
				$(this).toggleClass("active")
			} else {
				$(this).removeClass("active")
			}
		})
		$(this).toggleClass('active');
	});

	$(document).mouseup(function (e) {
		var parent = $(".slide-block").add('.js-slide-block-toggle');
		if (!parent.is(e.target) && parent.has(e.target).length === 0) {
			hideSlideMenu();
		}
	});
	// slide menu === end