Раскритикуйте мобильное меню — имеет право существовать?

Question

[Олег]

Изучаю JS. Написал вариант мобильного меню, раскритикуйте его, пожалуйста: достойно ли оно существования? Можно ли так делать мобильные меню, или у него есть жуткие недостатки?

Codepen посмотреть:

https://codepen.io/ovvivus/pen/wpompr

Логика простая:
1. Меню с position: fixed скрыто за пределы экрана (right: -320px);
2. При клике на кнопку "Меню", меню выезжает сбоку (right: 0);
3. Появляется затемнённый оверлей;
4. Для body устанавливается overflow: hidden (убирается скролл);
5. При нажатии ESC или клике по оверлею, меню снова прячется на right: -320px, и всё встаёт на свои места.

JS:

$('.Header-menu-button').click(function() {
    
    // появление меню
    
    // создание overlay
    $('body').append('<div class="overlay"></div>');
    // появление меню
    $('#Mobile-menu').addClass('open');
    // отключение scroll у страницы
    $('body').css('overflow-y', 'hidden');
    
    
    // Закрытие при нажатии Escape
    $(document).keyup(function(event){
        if (event.keyCode == 27) {
            // Удаление overlay
            $('.overlay').remove();
            // скрытие меню
            $('#Mobile-menu').removeClass('open');
            // возвращение скролла
            $('body').css('overflow-y', 'auto');
        }
    });
    
    // закрытие при клике по overlay
    $('.overlay').click(function() {
        $('body').css('overflow-y', 'auto');
        $('#Mobile-menu').removeClass('open');
        $('.overlay').remove();
    });
 
});

Comments

[Islam Ibakaev]

я бы уменьшил ширину до 240px - 260px и манипулировал бы свойством transform вместо right
почитайте это

[Олег]

Islam Ibakaev, это правда. Совсем забыл о перерасчёте макета. Статью прочитал, спасибо!

Answer 1

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

1. Добавьте класс состояния .no-scroll для body

body.no-scroll {
  overflow-y: hidden;
}

2. Пусть оверлей будет на странице всегда, но виден только когда на нем класс .active

.overlay {
  display: none;
}
.overlay.active {
  display: block;
}

3. для оверлея и кнопки добавьте класс .menu-toggle, по этому классу будет вешаться слушатель для управления меню.
4. Перепишите так:

$('.menu-toggle').click(toggleMobileMenu);

$(document).keyup(function(e){
  if (e.keyCode == 27 && $('#Mobile-menu').hasClass('open')) {
    toggleMobileMenu();
  }
});

function toggleMobileMenu() {
  $('body').toggleClass('no-scroll');
  $('.overlay').toggleClass('active');
  $('#Mobile-menu').toggleClass('open');
}

Навбар лучше сделать фиксированным.

Answer 2

[Nik]

Совет, не использовать для анимации rigth, для этого есть transformX, особенно для мобильных устройств

Answer 3

[WebDev]

Все в порядке, критиковать не за что. Оверлей можно не удалять а прятать.

Answer 4

[Alexej Simakov]

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

Answer 5

[St1myL]

Меню вполне нормальное.
З. Ы. Class & Id желательно с маленькой буквы писать