单击 link 时如何关闭汉堡菜单?
How to close hamburger menu when you click on link?
我正在制作汉堡包菜单,如果你能看到它可以工作,但是当我点击 link 它必须关闭,那么当你点击 [=21= 时如何关闭汉堡包菜单]?
#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>
您可以使用 javascript 将用户手动重定向到与所单击的 a
标签的 href
属性值相对应的位置。
在更改浏览器 window URL 之前,您可以关闭 side-bar 菜单。还要确保阻止单击 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();
}
我正在制作汉堡包菜单,如果你能看到它可以工作,但是当我点击 link 它必须关闭,那么当你点击 [=21= 时如何关闭汉堡包菜单]?
#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>
您可以使用 javascript 将用户手动重定向到与所单击的 a
标签的 href
属性值相对应的位置。
在更改浏览器 window URL 之前,您可以关闭 side-bar 菜单。还要确保阻止单击 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();
}