Jangan tatal menu hamburger
Teks CSS
body {
.lock & {
overflow: hidden;
touch-action: none;
overscroll-behavior: none;
}
.loaded & {
}
}
Apabila saya mengklik pada ikon, kod itu menambah kelas HTML "kunci"
const burgerClick = (e:React.MouseEvent<HTMLDivElement>) => {
if (widthWindow && widthWindow < 991.98) {
dispatch(changeStateMenuBurgerHeader(!stateMenuBurgerHeader))
document.documentElement.classList.toggle('lock');
}
}
Saya mempunyai komponen untuk menu hamburger. Saya mahu menatal semasa menu aktif.
Saya klik pada ikon dan kemudian menu hamburger menjadi aktif dan saya menambah kelas "Kunci" pada badan.
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>
);
Menu Tajuk Komponen
<div className="header__cover-lines">
<div className = "header__cover-left-block"
onMouseEnter={burgerMouseEnter}
onMouseLeave={burgerMouseLeave}
onClick = {burgerClick}
>
<BurgerMenu/>
<div className="header__menu-block">CinemaGO</div>
</div>
CSS untuk menu hamburger. Tetapi saya tidak boleh menatalnya apabila mene aktif dan saya tidak faham mengapa Saya cuba menulis limpahan bersembunyi dan menatalnya.
.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;
}
}