使用 HTML Checkbox 與 CSS 製作手機選單收合效果
更新日期： 2024 年 11 月 11 日
在設計響應式網站時，通常會用到手機選單收合效果，讓選單在小螢幕上可以收合起來，並以按鈕觸發展開。
以下我們將說明，如何使用 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取消選取後會隱藏，達到手機選單的收合效果。