CSS-只推导航不会隐藏

Question

我正在使用 css-only 推送导航。效果很好，但是我不知道如何在单击导航 link 时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是，当单击 link 并且站点跳转到某个部分时，我希望菜单自动滑入隐藏状态。

这是其中的 fiddle：

html:

<input type="checkbox" id="menu" name="menu" class="menu-checkbox">
<div class="menu">  
<label class="menu-toggle" for="menu"><span>Toggle</span></label>
<ul class="mainnav">
<li><a class="text-right" href="#about">ABOUT</a></li>
<li><a class="text-right" href="#process">PROCESS</a></li>
<li><a class="text-right" href="#work">WORK</a></li>
<li><a class="text-right" href="#contact">CONTACT</a></li>
</ul>
</div>

CSS:

label{
cursor: pointer;
&:focus;
outline: none;
}  

.menu{
position: fixed;
top: 0;
left: 0;
background-color: rgba(111, 206, 204, 0.7);
width: 240px;
height: 100%;
z-index: 10;
}

label.menu-toggle{
position: absolute;    
right: -60px;
width: 75px;
height: 90px;
line-height: 0px;  
display: block;
margin-top: 30px; 
margin-right: -50px;
padding: 0px 0px 0px 20px;
text-indent: -9999px;
background: 50% 50% / 45px 32px no-repeat;
background-image:url(../images/menu.png);
}


a, label{
display: block;
text-align: center;
line-height: 50px;
text-decoration: none;
}

.menu-checkbox{
display: none;
}

.menu .menu label.menu-toggle{
background: none;
}

.menu-checkbox:checked + .menu{
transform: translate3d(0, 0, 0);
-webkit-transition: translate3d(0, 0, 0);
}enter code here

Answer 1

尝试将这段代码添加到您的网站中，它应该可以完成工作。

$('ul.mainnav > li > a').on('click', function(e){
   $('#menu').prop('checked', false);
});

CSS-只推导航不会隐藏

CSS-only push nav won't hide

css

navigation

menu

slide