Как закрыть мобильное меню при изменении ширины экрана?

Question

[Pavel Pavel]

При уменьшении экрана до определенного значения исчезает основное меню и появляется кнопка для активации меню под мобильные устройства. Если на него нажимать, то меню нормально открывается и закрывается. Но если не закрывая его снова увеличить ширину экрана а затем уменьшить, то при повторном уменьшении меню появляется в открытом виде.
Как сделать так, чтобы оно при изменении ширины всегда было закрытым до клика на кнопку? И, скажите, есть ли еще способы кроме этого для реализации такого меню без js и какие(скрипты не знаю вообще)?
https://jsfiddle.net/vut2y0j1/6/

Answer 1

[Вадим В]

Можешь посмотреть как сделанно здесь https://codepen.io/erikterwan/pen/EVzeRP, тоже без JS. Но вот как можно анчекнуть checkbox по медиазапросу без JS ничего в голову не приходит...
Вот так можно на JS:

const mq  = window.matchMedia("(max-width: 700px)");
const checkbox = document.querySelector('#burger-active');

window.addEventListener('resize', function(){
if(!mq.matches && checkbox.checked) {
	checkbox.checked = false;
}
});

Comments

[Pavel Pavel]

Спасибо, хороший ответ. Я бы и сам предпочел js, просто не знаю его.

Answer 2

[Alex ALex]

Используйте медиа запросы.