ovvivus
@ovvivus

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

Изучаю 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();
    });
 
});
  • Вопрос задан
  • 519 просмотров
Пригласить эксперта
Ответы на вопрос 5
rockon404
@rockon404
Frontend Developer
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');
}


Навбар лучше сделать фиксированным.
Ответ написан
@KoiLVeD
Совет, не использовать для анимации rigth, для этого есть transformX, особенно для мобильных устройств
Ответ написан
Комментировать
@kirill-93
Все в порядке, критиковать не за что. Оверлей можно не удалять а прятать.
Ответ написан
Комментировать
lxsmkv
@lxsmkv
Test automation engineer
для мобильной страницы это одно из адекватных решений, до кнопки можно дотянуться пальцем. Так сделано на хабре. Можно еще сделать чтобы кнопка плавала при скролле. либо меню было зафиксированно. Также видел вариант, что при свайпе в сторону открывается меню.
Ответ написан
Комментировать
St1myL
@St1myL
Меню вполне нормальное.
З. Ы. Class & Id желательно с маленькой буквы писать
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы