Я кодирую боковое меню, которое, кажется, работает нормально ... но содержит ошибку.
Боковое меню скрывается с помощью медиазапроса, если окно меньше 660 пикселей. Затем появляется значок бургера и исчезает боковая панель.
Если вы нажмете на бургер, то меню появится снова.
Если вы нажмете «X», чтобы закрыть панель, меню снова исчезнет.
Пока здесь все нормально.
Теперь, если вы измените размер до нормального размера, боковое меню полностью исчезнет.
Мне нужно открыть его при изменении размера больше 660 пикселей, но я изо всех сил пытаюсь заставить его работать.
Вот грязный код (у меня нет намерений удалить его, чтобы он работал).
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
} else {
window width is less than 660px
}
}
Вот кодекс с полным кодом.
Спасибо за вашу помощь.