Как сделать чтобы мобильное меню перекрывало контент, а не появлялось сверху?

Question

[Егор Антропов]

Нужно чтобы мобильное меню открывалось на весь экран и было поверх контента, при этом должно скроллиться меню, а не контент сайта

Answer 1

[Анатолий Куликов]

Для этого необходимо сделать 2 вещи:
1) блок, содержащий в себе меню, должен быть фиксированным на всю ширину и высоту экрана, с наибольшим показателем z-index'a. То есть что-то типа такого:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10000;

2) При вызове меню на body повесить overflow: hidden, чтобы оно не скроллилось. Можно сделать путём добавления с помощью js нужного класса.

Comments

[Егор Антропов]

А можно как-нибудь не перекрывать блок с кнопкой, открывающей меню?

[Анатолий Куликов]

Можно, блок с кнопкой должен иметь бо́льший z-index. Но если покажете дизайн, возможно там как то по другому можно сделать.

Answer 2

[Roman Chuvilev]

Блок меню, по клику добавляется css классик с position: fixed; top: 0; left: 0; overflow: auto; width: 100vw; height: 100vh; z-index: 999. И не забудьте иконку закрытия на нем, по клику, убирающую этот классик и со e.stopPropagation() в коллбэке.

Comments

[Егор Антропов]

А можно как-нибудь не перекрывать блок с кнопкой, открывающей меню?