Как убрать класс при смене разрешения(ресайзе)?

Question

[rootnoroot]

В общем делаю меню
оно в position fixed за горизонтом right -100% при разрешении менее 1200пикс
при клике на кнопку burger меню присваивается класс active-menu
в css задаю ему right 0
меню выезжает справа, все ок
но если при этом вернуть разрешение более 1200пикс, меню остается в таком же положении
ресайзу еще задать параметры

$(function() {
            var burger = $('.burger');
            var menu = $('.nav');

            burger.click(function() {
            menu.toggleClass('active-menu');
            burger.toggleClass('actburger');
            });
         });

пробую что то намутить, не получается

$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 1200 && nav.is(':hidden')) {
               nav.removeClass('active-menu');
        		}});

Comments

[historydev]

намути ка описание того, как должно воркать ин йор дрим

[rootnoroot]

Владимир, ну смотрите
сейчас на разрешении менее 1200пикс, меню спрятано вправо на -100%
если кликаем по бургеру, ему задается класс active-menu, соответственно в стилях этому классу стоит справа 0%
т.е выезжает меню
но если в таком положении сделать ресайз экрана на более чем 1200пикс нужно убрать класс active-menu
потому, что на данный момент оно в таком открытом виде и продолжает стоять

[ProjectSoft]

rootnoroot, почему не изменяете стили CSS при новом разрешении экрана?
Для примера можно посмотреть любой CSS фреймворк.

[historydev]

rootnoroot, тебе нужно показывать меню если ширина экрана больше 1200px?

Answer 1

[Сергей delphinpro]

Не очень понятно.
Попробую переформулировать.

Вы открываете меню на мобильном разрешении, увеличиваете окно, и меню остается открытым, хотя на декстопе оно уже не требуется.
Так?

Тогда есть решение без javascript.

.menu {
  right: -100%;
}

@media(max-width: 768px) {
  /* Открывать меню только при ширине, меньшей 768 */
  .menu.open {
    right: 0;
  }
}

Остается небольшой сайд-эффект. Если снова уменьшить окно, меню появится открытым.
С этим часто можно мирится. Но если нет, то тогда придется проводить манипуляции скриптами

const m = matchMedia('(min-width: 768px)');
function watch(e) {
  if (e.matches) { // Сработает, когда ширина превысит 768px
    document.querySelector('.menu').classList.remove('open');
  }
}
m.addListener(watch);
watch(m);