Мобильное боковое меню --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