Html 图格尔汉堡菜单

我在我的项目中实现了这个汉堡包菜单。菜单工作得很好，但问题是当用户点击导航链接时它不会关闭，它只在点击汉堡包菜单时才会关闭。我要寻找的是——无论是用户点击汉堡菜单还是导航链接，其行为都应该是相同的。我已经尝试过了，但是没有成功，因为这是纯CSS驱动的，并且没有使用脚本。非常感谢您的帮助

。外部菜单{
位置：相对位置；
z指数：1；
}
.外部菜单.复选框切换{
位置：绝对位置；
排名：0；
左：0；
z指数：2；
光标：指针；
宽度：30px；
高度：30px；
不透明度：0；
}
.外部菜单.复选框切换：选中+.汉堡包>div{
-webkit变换：旋转（135度）；
变换：旋转（135度）；
}
.外部菜单.复选框切换：选中+.汉堡包>div:before，
.外部菜单.复选框切换：选中+.汉堡包>div:after{
排名：0；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
.外部菜单.复选框切换：选中+.汉堡包>div:after{
不透明度：0；
}
.外部菜单.复选框切换：选中~.菜单{
指针事件：自动；
能见度：可见；
}
.outer menu.复选框切换：选中~.menu>div{
-webkit转换：规模（1）；
变换：比例（1）；
-webkit转换持续时间：0.75s；
过渡时间：0.75s；
}
.outer menu.复选框切换：选中~.menu>div>div{
不透明度：1；
-webkit过渡：不透明度0.4s缓解0.4s；
过渡：不透明度0.4s缓解0.4s；
}
.外部菜单.复选框切换：悬停+.汉堡{
框阴影：插入0 10px rgba（0,0,0,0.1）；
}
.外部菜单.复选框切换：选中：悬停+.汉堡>div{
-webkit变换：旋转（225度）；
变换：旋转（225度）；
}
.外部菜单.汉堡包{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
宽度：30px；
高度：30px；
填充：1px；
背景：rgba（331502430.0）；
边界半径：0.12em0.12em0；
光标：指针；
-webkit过渡：盒影0.4s轻松；
过渡：盒影0.4s缓；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
}
.外部菜单.汉堡包>分区{
位置：相对位置；
-webkit-box-flex:0；
flex：无；
宽度：100%；
高度：2倍；
背景：#000000；
-webkit过渡：所有0.4s易用性；
过渡：所有0.4s缓解；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
}
.外部菜单.汉堡包>分区：之前，
.外部菜单.汉堡>分区：之后{
内容：''；
位置：绝对位置；
z指数：1；
顶部：-10px；
左：0；
宽度：100%；
高度：2倍；
背景：继承；
-webkit过渡：所有0.4s易用性；
过渡：所有0.4s缓解；
}
.外部菜单.汉堡>分区：之后{
顶部：10px；
}
.外部菜单.菜单{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
指针事件：无；
可见性：隐藏；
溢出：隐藏；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
外形：1px实心透明；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
}
.外部菜单.菜单>div{
宽度：140vw；
高度：140vw；
背景：$白色；
边界半径：50%；
-webkit过渡：所有0.4s易用性；
过渡：所有0.4s缓解；
-webkit-box-flex:0；
flex：无；
-webkit变换：缩放（0）；
变换：比例（0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
溢出：隐藏；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
}
.外部菜单.菜单>分区>分区{
文本对齐：居中；
最大宽度：90vw；
最大高度：100vh；
不透明度：0；
-webkit过渡：不透明度0.4s；
过渡：不透明度0.4s；
溢出y：自动；
-webkit-box-flex:0；
flex：无；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
}
.外部菜单.菜单>分区>分区>ul{
列表样式：无；
填充：0.1em；
保证金：0；
显示：块；
最大高度：100vh；
}
.外部菜单.菜单>div>div>ul>li{
填充：0；
边缘底部：2米；
字号：2em；
显示：块；
}
.外部菜单.菜单>div>div>ul>li>a{
位置：相对位置；
显示：内联；
光标：指针；
-webkit过渡：颜色0.4s轻松；
过渡：颜色0.4s；
文本转换：大写；
}
.外部菜单.菜单>div>div>ul>li>a:悬停{
颜色：#E5；
}
.外部菜单.菜单>div>div>ul>li>a:悬停：之后{
宽度：100%；
}
.外部菜单.菜单>分区>分区>ul>li>a:之后{
内容：''；
位置：绝对位置；
z指数：1；
底部：-0.15em；
左：0；
宽度：0；
高度：2倍；
背景：#333；
-webkit过渡：宽度0.4s；
过渡：宽度0.4s；
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isOpened = false;
  public toggleMenu() {
    this.isOpened = !this.isOpened;
  }
}

<div [class]="isOpened ? 'opened' :  'closed'" (click)="toggleMenu()"> Menu Icon</div>
<ul *ngIf="isOpened">
    <li (click)="toggleMenu()">
        Menu item here
    </li>
  <li (click)="toggleMenu()">
        Menu item here
    </li>
</ul>