点击链接时如何关闭汉堡菜单

Question

我正在制作汉堡菜单，如果你能看到它有效，但当我点击链接时，它必须关闭，那么当你点击链接时如何关闭汉堡菜单？

#menu__toggle {
opacity: 0;
}
#menu__toggle:checked~.menu__btn>span {
transform: rotate(45deg);
}
#menu__toggle:checked~.menu__btn>span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked~.menu__btn>span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked~.menu__box {
visibility: visible;
left: 0;
}
.menu__btn {
display: flex;
align-items: center;
position: absolute;
top: 22px;
left: 88%;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 2;
}
.menu__btn>span {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
}
.menu__btn>span::before,
.menu__btn>span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
}
.menu__btn>span::before {
content: '';
top: -8px;
}
.menu__btn>span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: fixed;
visibility: hidden;
top: 0;
left: -100%;
width: 100%;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
transition-duration: .25s;
z-index: 1;
}
.menu__item {
display: block;
padding: 12px 24px;
color: blue;
font-size: 25px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
.nav_desc {
position: relative;
text-align: center;
padding-top: 50px;
color: blue;
}

<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li>
<a class="menu__item" href="/Home">
Home
</a>
</li>
<li>
<a class="menu__item" href="/Books">
Books
</a>
</li>
<li>
<a class="menu__item" href="/Sale">
Sale
</a>
</li>
<li>
<a class="menu__item" href="/Support">
Support
</a>
</li>
<li>
<a class="menu__item" href="/About">
About
</a>
</li>
<li>
<a class="menu__item" href="/Latest News">
Latest News
</a>
</li>
<li>
<a class="menu__item" href="/FAQ">
FAQ
</a>
</li>
<li class="nav_desc">
<span>
A room without books is like a body without a soul.
</span>
</li>
</ul>
</div>

Answer 1

您可以使用javascript手动将用户重定向到与单击的a标记的href属性值相对应的位置。

在更改浏览器窗口URL之前，可以关闭侧栏菜单。还要确保防止单击a元素的默认行为。

以下javascript代码应该适用于您。

const linksContainer = document.querySelector('.menu__box');
linksContainer.addEventListener('click', (e) => {
if (e.target.matches('.menu__item')) {
// disable default behavior
e.preventDefault();
// close the side-bar menu
closeSideMenu();
// change the location
window.location.href = e.target.href;
}
});
function  closeSideMenu() {
const sideMenuToggle = document.querySelector('#menu__toggle');
sideMenuToggle.click();
}