Вот тут есть меню
silencer.website/consulex , оно скрывается и появляется лишь при нажатии на кнопку, но это должно же быть только на мобильных разрешениях. Так как это сделать? Может можно с помощью jQuery обвернуть и задать брейкпоинт? Разрешение если что нужно 767px. Надеюсь есть легкий способ это реализовать, а то вообще идей нет...
Вот сама функция:
$(document).ready(function () {
//OPEN TRIGGER
var openTrigger = $('.page-header__open-trigger');
var openTriggerTop = openTrigger.find('.page-header__open-bar--top');
var openTriggerMiddle = openTrigger.find('.page-header__open-bar--middle');
var openTriggerBottom = openTrigger.find('.page-header__open-bar--bottom');
//CLOSE TRIGGER
var closeTrigger = $('.page-header__close-trigger');
var closeTriggerLeft = closeTrigger.find('.page-header__close-bar--left');
var closeTriggerRight = closeTrigger.find('.page-header__close-bar--right');
var logo = $('.logo');
//MENU
var menuContainer = $('.main-nav__list-wrapper');
var menu = $('.main-nav__list');
var menuTop = $('.main-nav__background--top');
var menuMiddle = $('.main-nav__background--middle');
var menuBottom = $('.main-nav__background--bottom');
//TL
var tlOpen = new TimelineMax({paused: true});
var tlClose = new TimelineMax({paused: true});
//OPEN TIMELINE
tlOpen.add("preOpen")
.to(logo, 0.4, {
scale: 0.8,
opacity: 0,
ease: Power2.easeOut
}, "preOpen")
.to(openTriggerTop, 0.4, {
x: "+80px", y: "-80px", delay: 0.1, ease: Power4.easeIn, onComplete: function () {
closeTrigger.css('z-index', '25');
}
}, "preOpen")
.to(openTriggerMiddle, 0.4, {
x: "+=80px", y: "-=80px", ease: Power4.easeIn,
onComplete: function () {
openTrigger.css('visibility', 'hidden');
}
}, "preOpen")
.to(openTriggerBottom, 0.4, {
x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn
}, "preOpen")
.add("open", "-=0.4")
.to(menuTop, 0.8, {
y: "13%",
ease: Power4.easeInOut
}, "open")
.to(menuMiddle, 0.8, {
scaleY: 1,
ease: Power4.easeInOut
}, "open")
.to(menuBottom, 0.8, {
y: "-114%",
ease: Power4.easeInOut
}, "open")
.fromTo(menu, 0.6, {
y: 30, opacity: 0, visibility: 'hidden'
}, {
y: 0, opacity: 1, visibility: 'visible', ease: Power4.easeOut
}, "-=0.2")
.add("preClose", "-=0.8")
.to(closeTriggerLeft, 0.8, {
x: "-=100px", y: "+=100px", ease: Power4.easeOut
}, "preClose")
.to(closeTriggerRight, 0.8, {
x: "+=100px", y: "+=100px", delay: 0.2, ease: Power4.easeOut
}, "preClose");
//CLOSE TIMELINE
tlClose.add("close")
.to(menuTop, 0.2, {
backgroundColor: "#6295ca", ease: Power4.easeInOut, onComplete: function () {
logo.css('z-index', '26');
closeTrigger.css('z-index', '5');
openTrigger.css('visibility', 'visible');
}
}, "close")
.to(menuMiddle, 0.2, {
backgroundColor: "#6295ca", ease: Power4.easeInOut
}, "close")
.to(menuBottom, 0.2, {
backgroundColor: "#6295ca", ease: Power4.easeInOut
}, "close")
.to(menu, 0.6, {
y: 20, opacity: 0, ease: Power4.easeOut, onComplete: function () {
menu.css('visibility', 'hidden');
}
}, "close")
.to(logo, 0.8, {
scale: 1, opacity: 1, ease: Power4.easeInOut
}, "close", "+=0.2")
.to(menuTop, 0.8, {
y: "-113%",
ease: Power4.easeInOut
}, "close", "+=0.2")
.to(menuMiddle, 0.8, {
scaleY: 0,
ease: Power4.easeInOut
}, "close", "+=0.2")
.to(menuBottom, 0.8, {
y: "23%",
ease: Power4.easeInOut,
onComplete: function () {
menuTop.css('background-color', '#ffa000');
menuMiddle.css('background-color', '#ffffff');
menuBottom.css('background-color', '#ffa000');
}
}, "close", "+=0.2")
.to(closeTriggerLeft, 0.2, {
x: "+=100px", y: "-=100px", ease: Power4.easeIn
}, "close")
.to(closeTriggerRight, 0.2, {
x: "-=100px", y: "-=100px", delay: 0.1, ease: Power4.easeIn
}, "close")
.to(openTriggerTop, 1, {
x: "-=80px", y: "+=80px", delay: 0.2, ease: Power4.easeOut
}, "close")
.to(openTriggerMiddle, 1, {
x: "-=80px", y: "+=80px", ease: Power4.easeOut
}, "close")
.to(openTriggerBottom, 1, {
x: "-=80px", y: "+=80px", delay: 0.1, ease: Power4.easeOut
}, "close");
//EVENTS
openTrigger.on('click', function () {
if (tlOpen.progress() < 1) {
tlOpen.play();
} else {
tlOpen.restart();
}
});
closeTrigger.on('click', function () {
if (tlClose.progress() < 1) {
tlClose.play();
} else {
tlClose.restart();
}
});
$(function(){
$('.page-header__trigger').click(function(){
$('body').toggleClass('body--overflow');
});
});
});
Простой
