純CSS可切換選單
不囉唆，先看範例demo，請點擊下方的 ≣
點擊一次會顯示選單，再點擊一次會隱藏選單，反覆點擊就會反覆地顯示隱藏。 此技巧來自 [2] ，我稍微修改使之感覺更順眼。 這個技巧神奇就在於它是純 CSS 實現，不需要任何的 JavaScript 程式碼來控制，可以讓網頁載入速度更快，減低網站複雜度， 整個實作的程式碼不超過20行（程式碼請見下方） 如果選單設計不複雜的話，這是一個很不錯的實作方式， 我很喜歡這樣的技巧。
HTML 程式碼：
<label for="menu-toggle">≣</label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<li><a href="https://www.google.com/">Google</a></li>
<li><a href="https://duckduckgo.com/">DuckDuckGo</a></li>
<li><a href="https://www.ecosia.org/">Ecosia</a></li>
</ul>
CSS 程式碼：
label {
cursor: pointer;
}
#menu-toggle {
display: none;
}
#menu {
display: none;
}
#menu-toggle:checked + #menu {
display: block;
}
程式不多做解釋了，有興趣了解細節請自行參閱下方的參考。
參考：
| [1] |
| [2] | CSS only menu toggle - no JavaScript required |
| [3] |
| [4] |