使用 HTML Checkbox 與 CSS 製作手機選單收合效果

Published November 11, 2024 by 徐培鈞

CSS

在設計響應式網站時，通常會用到手機選單收合效果，讓選單在小螢幕上可以收合起來，並以按鈕觸發展開。

以下我們將說明，如何使用 HTML 中的 checkbox 搭配 label，利用 CSS 實現這種選單收合的功能。

這樣的設計，可以讓選單在點擊時由隱藏狀態切換為顯示狀態，並使用 opacity、transform、transition 等特效來增強視覺效果。

方法重點：利用 `checkbox` 的 `:checked` 狀態控制顯示

此方法的核心在於使用 checkbox 的 :checked 狀態來控制選單的顯示與隱藏。

以下是幾個主要原理：

使用 checkbox 的 :checked 狀態：
- checkbox 是一個可以保持選取狀態的輸入元件，當它被選取（checked）後，會觸發 CSS 中的 :checked 選擇器。
- 我們使用 :checked 選擇器搭配 CSS 選擇器關聯符號（~），對選單元素 .menu 進行樣式控制。

隱藏 checkbox：
- 將 checkbox 設置為 display: none; 隱藏起來，不影響畫面顯示。
- 同時設置一個 label，讓 label 點擊時可以控制 checkbox 的選取狀態，達到「遠端控制」的效果。

應用 transform 和 opacity 動畫：
- 當 checkbox 被選取時，選單 .menu 的 transform 和 opacity 狀態會發生變化，配合 transition 使其動畫更流暢。
- 例如，將 transform: translateX(-100%) 改為 transform: translateX(0)，同時改變 opacity 值，讓選單從隱藏狀態切換到顯示狀態。

這種方法的優點是 不依賴 JavaScript，僅用 HTML 和 CSS 就能控制選單的顯示與否，適合製作簡單、輕量的響應式手機選單。

步驟 1：建立 HTML 結構

首先，建立一個基本的 HTML 結構，包含一個 checkbox 和一個選單區域。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手機選單收合效果</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- 隱藏的 checkbox，用於控制選單顯示或隱藏 -->
    <input type="checkbox" id="box_btn" />

    <!-- 頁首區塊 -->
    <header>
      <!-- 點擊這個 label 控制 checkbox 狀態 -->
      <label for="box_btn" class="ham">X</label>

      <!-- Logo -->
      <div class="logo">LOGO</div>

      <!-- 選單 -->
      <ul class="menu">
        <li class="menu_list">menu</li>
        <li class="menu_list">menu</li>
        <li class="menu_list">
          menu*
          <!-- 子選單 -->
          <ul class="submenu">
            <li class="submenu_list">submenu</li>
            <li class="submenu_list">submenu</li>
            <li class="submenu_list">submenu</li>
          </ul>
        </li>
        <li class="menu_list">menu</li>
      </ul>
    </header>
  </body>
</html>

說明

input：這是一個 checkbox，使用 display: none; 隱藏起來，但我們會用 label 來控制它。
label：設置 for 屬性對應到 checkbox，點擊時可以控制 checkbox 的選取狀態。
.menu：選單容器，包含了幾個主選單項目，並在部分項目內加入子選單 .submenu。

步驟 2：設置基本 CSS 樣式

接著在 CSS 中設定選單樣式，並為不同螢幕尺寸設定響應式的行為。

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: #eee;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  box-sizing: border-box;
}

/* 手機螢幕下的響應式樣式 */
@media screen and (width <= 768px) {
  header {
    justify-content: flex-start;
    gap: 20px;
    position: relative;
  }

  .ham {
    display: block;
    line-height: 50px;
    background: pink;
    padding: 0 10px;
    border-radius: 5px;
  }

  .menu {
    position: absolute;
    top: 70px;
    left: 0;
    transform: translateX(-100%);
    opacity: 0;  /* 隱藏選單 */
    transition: all 0.5s;
  }

  #box_btn:checked ~ header .menu {
    transform: translateX(0);  /* 顯示選單 */
    opacity: 1;
  }

  .menu_list {
    display: block;
    width: 300px;
    background: orange;
  }

  .submenu {
    display: block;
    position: relative;
  }
}

說明

.menu：設置為 position: absolute 以便在小螢幕時能夠自由移動位置。將 opacity 設為 0 隱藏選單。
#box_btn:checked ~ header .menu：當 checkbox 被選取時，改變 .menu 的 transform 和 opacity，使選單移動並顯示。
.ham：設置一個可見的按鈕來控制 checkbox，小螢幕時顯示。

步驟 3：增強動畫效果

使用 transition 來讓選單的出現與消失更為平滑。

以下是 transition 和 transform 的效果設置。

#box_btn {
  display: none;
}

.menu {
  transition: all 0.5s; /* 增加平滑效果 */
}

.menu_list:hover .submenu {
  display: block;
}

#box_btn：將 checkbox 隱藏。
.menu：加上 transition，讓選單的 translateX 和 opacity 轉換更平滑。

最終效果

在手機螢幕上，點擊 label 中的圖標，checkbox 的選取狀態改變。
CSS 偵測到 checkbox 被選取後，應用 transform: translateX(0) 和 opacity: 1，將選單滑入並顯示。
選單在 checkbox 取消選取後會隱藏，達到手機選單的收合效果。