Html 仅CSS推送菜单导航

我在我的单页网站上使用的是CSS-only推送导航。因此，当你点击菜单图标时，导航会从页面的侧面弹出，当你再次点击时，导航会隐藏。由于它是一个单页网站，当你点击导航链接时，它将跳转到页面的另一部分。菜单工作得很好，但是当我点击导航链接时，我似乎无法隐藏它！当它跳转到另一个部分时，菜单就停留在原来的位置，这是我不想要的

如果有人知道我如何使菜单隐藏时，该网站跳转到另一个部分，请让我知道

以下是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>

---

我知道我需要切换隐藏复选框来关闭菜单，我只是不知道如何关闭

完成！用一点jquery

$（'.menu toggle'）。打开（'click'，function（）{
$（'.menu'）.css({
“翻译（100%，100%）”
});
});
$（'.close btn mail'）。在（'单击'，函数（）上）{
$（'.menu'）.css({
“转换”：“转换（-100%，-100%）”
});
});
@charset“UTF-8”；
/*CSS文档*/
p{
字体系列：“Lato”，无衬线；
字体大小：300；
颜色：#5959；
字体大小：16px；
}
氢{
字体系列：“Cookie”，草书；
颜色：#5959；
字体大小：35px；
显示：表格；
保证金：0自动；
}
#包装纸{
位置：绝对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
}
标签{
光标：指针；
&：焦点；
大纲：无；
}
.菜单{
显示：块；
}
.隐藏列表{
显示：无；
}
.菜单{
位置：固定；
排名：0；
左：0；
背景色：rgba（111、206、204、0.7）；
宽度：240px；
身高：100%；
左边距：0px；
变换：translate3d（-240px，0，0）；
转换属性：所有.2s易用；
-moz转换：所有.2秒易用；
-webkit过渡：所有.2易用性；
-o-过渡：所有.2秒容易进入；
z指数：10；
}
.容器.扩展{
宽度：220px；
溢出：隐藏；
}
.集装箱.倒塌{
宽度：220px；
左边距：220px；
溢出：可见；
}
label.menu-toggle{
位置：绝对位置；
右：-60px；
宽度：75px；
高度：90px；
线高：0px；
显示：块；
边缘顶部：30px；
右边距：-50px；
填充：0px 0px 0px 20px；
文本缩进：-9999px；
背景：50%50%/45px 32px无重复；
背景图片：url(http://averyeliasdesign.com/portfolio/images/menu.png);
过渡：所有0.2秒在0秒内缓解；
过渡性质：全部；
过渡时间：0.2s；
过渡时间功能：轻松进入；
转换延迟：0s；
-webkit过渡：所有0.2秒都在0秒内轻松完成；
-webkit过渡：所有0.2秒都在0秒内轻松完成；
-webkit转换属性：全部；
-webkit转换持续时间：0.2s；
-webkit过渡计时功能：易用；
-webkit转换延迟：0秒；
}
A.
标签{
显示：块；
文本对齐：居中；
线高：50px；
文字装饰：无；
}
/*隐藏输入*/
.菜单复选框{
显示：无；
}
/*隐藏子标签的导航图标*/
.菜单.菜单标签.菜单切换{
背景：无；
}
/*淡入选中菜单*/
.菜单复选框：选中+.菜单{
变换：translate3d（0,0,0）；
-webkit转换：translate3d（0,0,0）；
}
.menu复选框：选中+.menu.menu.container ul.mainnav li a:已访问{
变换：translate3d（0,0,0）；
-webkit转换：translate3d（0,0,0）；
}
.标志{
最大宽度：260px；
利润上限：-15px；
}
#总管{
背景图片：url(http://averyeliasdesign.com/portfolio/images/desk.jpg);
背景尺寸：100%自动；
宽度：100%；
身高：100%；
背景附件：固定；
}
#李梅因{
列表样式类型：无；
}
#主标题a{
字体系列：“Lato”，无衬线；
字体大小：300；
字体大小：22px；
颜色：#fff；
显示：块；
不透明度：0.7；
显示：表格；
保证金：0自动；
}
#主标题：a:悬停{
不透明度：1；
过渡：所有0.3秒在0秒内轻松过渡；
}
#主标题ul{
填充顶部：60px；
}
#信息{
显示：表格；
背景：rgba（0,0,0,0.2）；
身高：100%；
宽度：100%；
}
#信息内容{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
文本转换：大写；
颜色：#fff；
字体大小：12px；
}
h1{
颜色：#fff；
边框：3px实心#fff；
文本对齐：居中；
背景：rgba（0,0,0,0.1）；
字体大小：22px；
字体大小：正常；
填充：20px；
利润率：10px；
显示：内联块；
}
强壮的{
显示：块；
字号：26px；
}
@仅介质屏幕和（最大宽度：1024px）{
#总管{
背景图片：url(http://averyeliasdesign.com/portfolio/images/desk2.jpg);
}
}
@仅介质屏幕和（最大宽度：700px）{
#总管{
背景图片：url(http://averyeliasdesign.com/portfolio/images/desk3.jpg);
}
.菜单复选框：选中+.菜单{
宽度：100%；
}
.菜单{
背景色：rgba（111、206、204、0.8）；
}
#主标题a{
字体系列：“Lato”，无衬线；
字体大小：300；
字体大小：30px；
颜色：#fff；
不透明度：0.7；
显示：表格；
保证金：0自动；
利润上限：-4px；
}
}
@仅介质屏幕和（最大宽度：440px）{
#总管{
背景图片：url(http://averyeliasdesign.com/portfolio/images/desk4.jpg);
}
}
/*关于*/
#关于{
填充顶部：70px；
}
.关于我{
字体系列：“Cookie”，草书；
字体大小：40px；
颜色：#5959；
}
#哎{
显示：表格；
保证金：0自动；
}
.装饰{
利润上限：-8px；
}
.aboutInfo{
左侧填充：130像素；
右边填充：130px；
}
#鸟类{
显示：表格；
保证金：0自动；
宽度：17%；
填充顶部：20px；
垫底：70px；
}
@仅介质屏幕和（最大宽度：1240px）{
.aboutInfo{
左侧填充：210px；
右边填充：210px；
}
}
@仅介质屏幕和（最大宽度：1000px）{
.aboutInfo{
左侧填充：120px；
右侧填充：120px；
}
}
@仅介质屏幕和（最大宽度：815px）{
.装饰{
宽度：250px；
利润上限：-8px；
}
.关于我{
字体大小：35px；
}
#鸟类{
宽度：25%；
}
}
@仅介质屏幕和（最大宽度：694px）{
.装饰{
宽度：200px；
}
.关于我{
显示：表格；
保证金：0自动；
}
}
@媒体
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);
}