Есть бургер меню, которое открывается при клике на иконку
return (
<div className= {!stateMenuBurgerHeader
? "header__burger"
: "header__burger menu-open"
}>
<MyButton
className = "header__btn-burger icon-menu"
type = "button"
>
<span></span>
</MyButton>
<nav className="header__nav nav-header">
<ul className="header__list nav-header__list">
{widthWindow && widthWindow >= 950
? burgerMenu.map((item) =>
<LinkBurger
burgerMenuList = {item}
key = {item.text}
className = {item.icon}
/>)
: burgerMenuSecond.map((item) =>
<LinkBurger
burgerMenuList = {item}
key = {item.text}
className = {item.icon}
/>)
}
</ul>
</nav>
</div>
);
};
При открытии меню на html вешаю класс lock и на body добавляются стили:
body {
.lock & {
overflow: hidden;
touch-action: none;
overscroll-behavior: none;
}
.loaded & {
}
}
на само меню добавлю следующие стили:
но почему то не скролится, не могу понять почему
.nav-header{
background-color: rgba(21, 21, 21, 0.96);
z-index: 4;
@media (min-width: $tablet) {
padding-bottom: rem(10);
padding-top: rem(100);
border-radius: rem(10);
min-width: rem(400);
margin-left: -10px;
position: absolute;
top: 0;
left: 0;
transform: translate(0px,-30px);
}
@media (max-width: $tablet) {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
padding-top: rem(80);
transform:translate(-120%,0%);
transition: transform ease 1s 0s;
overflow: scroll;
.menu-open & {
transform:translate(0%,0%);
transition: transform ease 1s 0s;
}
}
Простой
