javascript - 仅使用 CSS 关闭菜单

Question

我成功地删除了我的移动设计中的 javascript 并仅通过 CSS 打开侧边菜单。我的侧边菜单是这样的:

<div class="all-content">
    <div id="menu-content" class="menu-content">
        .... menu content....
    </div>
</div>

打开菜单的链接:

 <a href="#menu-content"><i class="fa fa-navigation></i></a>

在 CSS 中:

.menu-content{
    opacity: 0;
    z-index: 0;
    left: -100%;
}

.menu-content:target{
    opacity: 1;
    z-index: 1000;
    left: 0px;
}

这很好用!

我想要的是在没有 javascript 的情况下通过单击“菜单外的任何位置”来关闭此菜单。

我知道单击任何链接 将关闭此菜单，但我找不到如何绑定(bind)整个内容。

谢谢。

Answer 1

1. 创建一个复选框并使用 opacity:0 将其隐藏
2. 让它覆盖大面积 width/height:500px
3. 让它position:absolute不影响周围元素的位置
4. 写一个css样式来隐藏:checked复选框的兄弟

#CheckBox:checked ~ .menu-content {
  display: none;
}
#CheckBox {
  width: 500px;
  height: 500px;
  opacity: 0;
  position: absolute;
}

<input id="CheckBox" type="checkbox" />
<div id="menu-content" class="menu-content">
  Side Menu
</div>