Как сделать исчезающее меню при клике на кнопку меню в случае с функцией resize?

Question

[Елена]

Всем привет!

Есть следующая функция для меню:

$(window).bind('resize', function(){ 
    if ($(window).width() < 450) { 
        $('.header').removeClass('flex');
        $('body').append('<div class="overlay"></div>');
        $('.logo, .contacts, .nav').addClass('fadeout');
        $('.fadeout').css('display','none');
        $('.nav').css('z-index','9');
        
    $('.btn-nav').on('click', function() {
        if ($('.fadeout, .overlay').css("display") == "none") {
            $('.fadeout').fadeIn(200);
            $('.overlay').fadeIn(200);
            $('.btn-nav').css('background','url(img/btn-nav-active.png) top left no-repeat');
        }
        else {
                $('.overlay').fadeOut(200);
                $('.fadeout').fadeOut(200);
                $('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat');
            }
    });  
    
    $(('a.nav-link')).on('click touch', function() { 
        $('.overlay, .fadeout').fadeOut();
        $('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat'); 
    }); 
    
    $('body').on('click', '.overlay', function(event) {
    event.preventDefault();
        $('.overlay, .fadeout').fadeOut(200);
        $('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat');
    });  
} 
else { 
    if ($(window).width() > 450) {         
        $('.header').addClass('flex');
        $('.logo, .contacts').css('display','block'); 
        $('.nav').css('display','flex');
        $('.logo, .contacts, .nav').removeClass('fadeout');
        $('.overlay').remove();
        }
    }
}).trigger('resize');

Все отлично работает при первой загрузке страницы на смартфоне, то есть пока не был сделан ресайз окна (поворот экрана на смарфтоне или же включение режима адаптива в режиме разработчика).

Если убрать

"else {
         $('.overlay').fadeOut(200);
         $('.fadeout').fadeOut(200);
         $('.btn-nav').css('background', 'url(img/btn-nav.png) top left no-repeat');
}

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

Помогите, пожалуйста, разобраться, что не так делаю.
На jsfiddle все кидать проблематично, вот ссылка на тестовый хост с сайтом: клик

Кстати, также интересно почему при ресайзе он создает мне сразу два div с оверлеем, хотя в скрипте добавляется он один раз.

Comments

[Антон Спирин]

У меня ошибка ReferenceError: resize is not defined в Opera.
ИМХО resize тут вообще обрабатывать незачем.
Все ваши манипуляции с css решаются одним запросом.

[Елена]

Антон Спирин, и как же? Напишите тогда свой вариант. Я затем и задаю здесь вопросы, чтобы найти более правильное простое и короткое решение, а не просто ответ, что можно сделать иначе. :-)

Ошибку выдает, потому что там нет кавычек в скобках у триггера. Это опечатка моя))) resize должно быть в кавычках.

На серваке можно не смотреть уже. Там теперь рабочий вариант. По-другому переписала код. Вот так:

$(window).bind('resize', function(){ 
    if ($(window).width() < 450) { 
        $('.header').removeClass('flex');
        $('body').append('<div class="overlay"></div>');
        $('.nav').css('z-index','9');   
        $('.logo, .contacts, .nav').addClass('fadeout');
        $('.fadeout').css('display','none');
    } 
    else { 
        if ($(window).width() > 450) {         
            $('.header').addClass('flex');
            $('.overlay').remove();
            $('.nav').css('z-index','11');
            $('.logo, .contacts').css('display','block'); 
            $('.nav').css('display','flex');
            $('.logo, .contacts, .nav').removeClass('fadeout');
            }
        }
  
}).trigger('resize');

    $('.btn-nav').on('click', function() {
        if ($('.fadeout, .overlay').css("display") == "none") {
            $('.fadeout').fadeIn(200);
            $('.overlay').fadeIn(200);
            $('.btn-nav').css('background','url(img/btn-nav-active.png) top left no-repeat');
        }
        else {
                $('.overlay').fadeOut(200);
                $('.fadeout').fadeOut(200);
                $('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat');
            }
    });  
    
    $(('a.nav-link')).on('click touch', function() { 
        $('.overlay, .fadeout').fadeOut();
        $('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat'); 
    }); 
    
    $('body').on('click', '.overlay', function(event) {
    event.preventDefault();
        $('.overlay, .fadeout').fadeOut(200);
        $('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat');
    });

То есть в ресайз ушли только манипуляции с классами и свойствами, ведь кнопки мобильного меню в любом случае нет в декстопной версии.

Тут единственный минус разве что в том, что при клике по ссылке скрипт будет отрабатывать, вот только классов, которые должны исчезать при этом, тут нет. Но эту часть тоже можно вынести в resize.

[Антон Спирин]

Оверлей не надо рендерить каждый раз. Пусть он будет на странице всегда. Его все равно можно только по кнопке меню вызвать.
У вас сейчас при ресайзе до 450px каждый раз overlay добавляется, их так можно и 100000 наплодить.

Касательно стилей, можно отказаться от ресайза и все что вы там делали реализовать в css:

/*  стили для мобильной версии */
  @media screen and (min-width: 450px) {
    /* прячем кнопку меню
       стили для десктопа */
  }

fadeIn и fadeOut можно реализовать с помощью transition: opacity 0.2s;
и в js только добавлять и убирать классы вроде .is-active { display: block; opacity: 1; }

Селекторы для стилей и js пишите отдельно
<button class="btn-nav js-btn-nav"></button>
Так же можно и для состояний is-active, is-selected

Я бы полностью выпилил resize, отказался от fadeIn fadeOut и использования функции css()

Одно дело если вам доделать и забыть, то можно не заморачиваться и так оставить. Другое дело если еще много работы. С таким подходом как вы делаете, вы можете нагородить кучу сложных легко ломающихся велосипедов зависящих от кучи факторов и несущих в себе кучу багов которые не сразу можно заметить.

[Елена]

Антон Спирин, посмотрите код css, там итак оно все формируется в медиазапросе из декстопной версии с помощью flexbox свойств. И там не одно меню участвует, там вся шапка полностью переформируется в этих стилях в новое меню и в новую шапку, ибо в мобильной версии совершенно иное расположение этих же элементов в шапке, чем в декстопе. Часть уходит в меню, часть остается в шапке. И попросили не создавать второе меню для мобилы в html коде (что было бы проще), чтобы не дублировать код, а реализовать все через css, и также не добавлять его через js (имеется ввиду через append новое меню, удаляя при этом старое через remove).

И как сделать через css выпадающее меню при клике по кнопке, которое еще и представляет собой полностью переформированную всю шапку сайта, и у которого только отдельные блоки должны быть видимы при клике и невидимы в остальное время? Тут вся задница именно в структуре меню. Это не просто список в шапке, который в мобиле там надо скрыть, а в выпадающем меню добавить.

У вас сейчас при ресайзе до 450px каждый раз overlay добавляется, их так можно и 100000 наплодить.

Ну так при ресайзе обратно в > 450 оверлей удаляется обратно. Хотя это действительно лишняя манипуляция. Можно и оставить пустой блок с оверлеем в коде, но это уже к вопросу наличия лишних пустых блоков в коде и т.д. А так обычно я всегда делаю пустой блок с классом overlay в начале или в конце body с "display: none" для этой цели, потому что это проще и удобнее.

fadeIn и fadeOut можно реализовать с помощью transition: opacity 0.2s;
и в js только добавлять и убирать классы вроде .is-active { display: block; opacity: 1; }

А в чем принципиальная разница между ними? fadeIn по сути добавляет display: block и заданную скорость появления. То же, что я бы прописала в этом классе active. Разве что появление через opacity будет более плавным. Можно и изменить. Но также можно и через .css это делать, меняя opacity. В чем принципиальное отличие между изменением свойств и добавлением классов? Я имею ввиду, чем добавление/удаление лучше, чем изменение свойств.

Вот насчет решения через добавление, удаления класса была идея сделать так для самой кнопки меню, она там цвет меняет. То есть не через .css, а через .active с нужным фоном кнопки. Но тогда придется старый фон прописать через отдельный класс, который удалять и добавлять новый при клике. Неудобно.

Я бы полностью выпилил resize, отказался от fadeIn fadeOut и использования функции css()

Так вот без него после поворота экрана или изменения размера окна в браузере меню не появляется обратно. Оно исчезает полностью из-за того, что мы убираем его при клике на кнопку, фон, ссылку и т.д. То есть в мобиле меню принимает "display: none", при клике оно появляется, но после клика по кнопке, фону или ссылке снова исчезает. Скрипт, как говорится, свою работу сделал. В результате после поворота экрана (где уже снова отображается декстопная версия сайта) или ресайза в режиме разработчика меню остается скрытым.

Поэтому я и заморочилась с этим ресайзом, добавившим столько проблем.

Конечно, проще, когда можно в html сделать отдельно мобильное меню и просто сделать его появление/исчезновение с помощью пары строк кода jquery, а не воротить все операции со свойствами, классами и т.д.

[Елена]

Антон Спирин,

А в чем принципиальная разница между ними? fadeIn по сути добавляет display: block и заданную скорость появления. То же, что я бы прописала в этом классе active. Разве что появление через opacity будет более плавным. Можно и изменить. Но также можно и через .css это делать, меняя opacity. В чем принципиальное отличие между изменением свойств и добавлением классов? Я имею ввиду, чем добавление/удаление лучше, чем изменение свойств.

В общем-то, загуглила этот вопрос, не дожидаясь ответа, и нашла хорошую статью. Да... не задумывалась как-то о том, что все эти методы вписывают все стили в атрибут style у элемента. Обращала внимание, но не задумывалась о последствиях этого, хотя сама бы ни за что не стала в html файле руками прописывать стили подобным образом, особенно со скрытым во вкладках контентом, который, получается, не будет индексироваться поисковиками, раз он всегда скрыт по умолчанию, а это плохо.

В общем, теперь буду использовать классы, как вы предложили, с теми же свойствами display: none, block и т.д. :-)