Html 如何使导航栏在使用后消失？

我正在制作一个网站，它在桌面和手机上都能响应。在移动设备上，如果我单击其中一个属性标记（例如About），它将成功导航到html页面的该部分。但是，用户必须点击x图标退出导航栏。我想知道是否有办法在事件（点击链接）发生后关闭导航栏

图片：

Html:

---

注意：navbar类名为“menu”

最简单的方法是使用一点JavaScript。大概是这样的：

        <a href="#section1" onclick="document.getElementById('chk').checked = false">Home</a>

您将在onclick事件上更改复选框的选中状态，从而在单击链接后立即关闭菜单。链接仍然有效

家
家
城市青年


html{
滚动行为：平滑；
}
*{
保证金：0；
填充：0；
字体系列：“蒙特塞拉特”，无衬线；
}
.标题{
高度：100px；
背景#34495e；
填充：0 20px；
颜色：#fff；
位置：固定；
排名：0；
左：0；
右：0；
z指数：1030；
}
.标志{
线高：100px；
浮动：左；
文本转换：大写；
位置：固定；
排名：0；
z指数：1030；
}
.菜单{
浮动：对；
线高：100px；
位置：固定；
右：0；
排名：0；
z指数：1030；
}
.版权信息{
浮动：对；
线高：100px；
位置：固定；
右：0；
排名：0；
z指数：1030；
可见性：隐藏；
}
.菜单a{
颜色：#fff；
文本转换：大写；
文字装饰：无；
填充：0 10px；
过渡：0.4s；
}
.显示菜单btn、.隐藏菜单btn{
过渡：0.4s；
字体大小：30px；
光标：指针；
显示：无；
}
.显示菜单btn{
浮动：对；
}
.显示菜单btn i{
线高：100px；
}
.菜单a：悬停，
.显示菜单btn：悬停，
.隐藏菜单btn：悬停{
颜色：#3498db；
}
#chk{
位置：绝对位置；
可见性：隐藏；
z指数：-1111；
}
.内容{
填充：0 20px；
边缘顶部：120px；
背景色：#333333；
}
.内容img{
宽度：100%；
最大宽度：700px；
利润率：20px0；
}
.内容p{
文本对齐：对齐；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.显示菜单btn、.隐藏菜单btn{
显示：块；
}
.菜单{
位置：固定；
宽度：100%；
高度：100vh；
背景：#333；
右图：-100%；
排名：0；
文本对齐：居中；
填充：80px0；
线高：正常；
过渡：0.7s；
}
.菜单a{
显示：块；
填充：20px；
}
.隐藏菜单btn{
位置：绝对位置；
顶部：40px；
右：40px；
}
#chk:选中~。菜单{
右：0；
}
.版权信息{
位置：固定；
宽度：100%；
高度：100vh；
背景：#333；
右图：-100%；
排名：0；
文本对齐：居中；
填充：80px0；
线高：正常；
过渡：0.7s；
能见度：可见；
}
}
.卡片{
盒影：0.4px16px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：100%；
}
.集装箱{
填充：2x16px；
}
p{
字体大小：120%；
}
h4{
字体大小：130%；
}
身体{
边际：0px；
}
.色块{
背景#34495e；
宽度：60%；
填充物：7%20%10%20%；
颜色：#fff；
}
.白色方块{
背景：#fff；
宽度：60%；/*更改此选项可更改分隔符中文本周围的填充/边距*/
填充物：7%20%10%20%；
颜色：823A9C；
}
h1{
文本对齐：居中；
字号：80px；
字体系列：'wire one'，衬线；
字体大小：正常；
}
p{
字体大小：20px；
字体系列：'Raleway'，衬线；
}
/*------------------*/
/*顺时针倾斜*/
/*------------------*/
.skew cc{
宽度：100%；
高度：100px；
位置：绝对位置；
左：0px；
背景：线性梯度（至右下，#34495e 49%，#fff 50%），线性梯度（-50度，#ffffff 16px，#000 0）；
}
/*-------------------------*/
/*逆时针倾斜*/
/*-------------------------*/
.skew-c{
宽度：100%；
高度：100px；
位置：绝对位置；
左：0px；
背景：线性梯度（至左下，#fff 49%，#34495e 50%）；
}
@介质（最大宽度：767px）{
.色块h1、.白色块h1{填充顶部：60px；}
}
家
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子

关于
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。马萨·奎斯·埃尼姆会议中心
html {
  scroll-behavior: smooth;
}

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}
.header{
  height: 100px;
  background: #34495e;
  padding: 0 20px;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.logo{
  line-height: 100px;
  float: left;
  text-transform: uppercase;
  position: fixed;
  top: 0;
  z-index: 1030;
}

.menu{
  float: right;
  line-height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

.copyright-info {
  float: right;
  line-height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
  visibility: hidden;
}
.menu a{
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: 0.4s;
}
.show-menu-btn,.hide-menu-btn{
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
.show-menu-btn{
  float: right;
}
.show-menu-btn i{
  line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover{
  color: #3498db;
}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

.content{
  padding: 0 20px;
  margin-top: 120px;
  background-color: #333333;
}
.content img{
  width: 100%;
  max-width: 700px;
  margin: 20px 0;
}
.content p{
  text-align: justify;
}

@media screen and (max-width:800px) {
  .show-menu-btn,.hide-menu-btn{
    display: block;
  }
  .menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #333;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .menu a{
    display: block;
    padding: 20px;
  }
  .hide-menu-btn{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .menu{
    right: 0;
  }

  .copyright-info {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #333;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
    visibility: visible;
  }
}

.card {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100%;
}

.container {
  padding: 2px 16px;
}
p {
  font-size: 120%;
}

h4 {
  font-size: 130%;
}


        <a href="#section1" onclick="document.getElementById('chk').checked = false">Home</a>