僅使用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的菜單」。

我知道點擊任何鏈接將關閉此菜單，但我無法找到如何做到與整個內容綁定。

現在感謝。

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>

的兄弟姐妹