純CSS可切換選單


不囉唆,先看範例demo,請點擊下方的

點擊一次會顯示選單,再點擊一次會隱藏選單,反覆點擊就會反覆地顯示隱藏。 此技巧來自 [2] ,我稍微修改使之感覺更順眼。 這個技巧神奇就在於它是純 CSS 實現,不需要任何的 JavaScript 程式碼來控制,可以讓網頁載入速度更快,減低網站複雜度, 整個實作的程式碼不超過20行(程式碼請見下方) 如果選單設計不複雜的話,這是一個很不錯的實作方式, 我很喜歡這樣的技巧。

HTML 程式碼:

<label for="menu-toggle">&#8803;</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]