CSS Sidebar / Drawer / Off-canvas 側邊抽屜選單

側邊抽屜選單（也稱為 Off-canvas 選單）是行動版網頁設計中最不可或缺的元素之一。它平時隱藏在畫面外，當使用者點擊漢堡按鈕時，選單會從左側或右側滑入。

透過純 CSS，我們可以使用 checkbox 技巧來控制選單的顯示與隱藏。

基本結構

核心思想是使用一個隱藏的 <input type="checkbox"> 和一個與之連結的 <label>（漢堡按鈕）。當選單開啟時，我們使用相鄰選擇器來改變選單的位置。

<!-- 隱藏的控制開關 -->
<input type="checkbox" id="drawer-toggle" class="drawer-toggle">

<!-- 漢堡按鈕 -->
<label for="drawer-toggle" class="drawer-btn">
  <span></span>
  <span></span>
  <span></span>
</label>

<!-- 側邊選單內容 -->
<aside class="sidebar">
  <nav>
    <ul>
      <li><a href="#">首頁</a></li>
      <li><a href="#">產品介紹</a></li>
      <li><a href="#">最新消息</a></li>
      <li><a href="#">聯絡我們</a></li>
    </ul>
  </nav>
</aside>

<!-- 遮罩層（選單開啟時背景變暗） -->
<label for="drawer-toggle" class="drawer-overlay"></label>

CSS 實作

以下是實現平暢滑動效果的關鍵樣式：

/* 隱藏 Checkbox */
.drawer-toggle {
  display: none;
}

/* 側邊欄初始位置（在畫面左側外） */
.sidebar {
  position: fixed;
  top: 0;
  left: -280px; /* 選單寬度 */
  width: 280px;
  height: 100%;
  background-color: #333;
  color: white;
  transition: left 0.3s ease;
  z-index: 1000;
  padding: 60px 20px;
}

/* 當 Toggle 被選中時，側邊欄滑入 */
.drawer-toggle:checked ~ .sidebar {
  left: 0;
}

/* 漢堡按鈕樣式 */
.drawer-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  cursor: pointer;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.drawer-btn span {
  width: 30px;
  height: 3px;
  background-color: #333;
  transition: all 0.3s;
}

/* 遮罩層 */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  z-index: 999;
}

.drawer-toggle:checked ~ .drawer-overlay {
  visibility: visible;
  opacity: 1;
}

進階效果：按鈕動畫

當選單開啟時，將三條槓的漢堡按鈕轉換成「X」型狀，能提供更好的視覺回饋。

/* 開啟時第一條槓旋轉 */
.drawer-toggle:checked ~ .drawer-btn span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

/* 開啟時中間那條槓消失 */
.drawer-toggle:checked ~ .drawer-btn span:nth-child(2) {
  opacity: 0;
}

/* 開啟時第三條槓旋轉 */
.drawer-toggle:checked ~ .drawer-btn span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

實作預覽

點擊左上角按鈕開啟選單

實務建議

  1. 寬度設定：側邊欄的寬度建議不要佔滿整個螢幕，留下一點空間讓使用者可以看到背景，有助於理解目前的頁面層級。
  2. 禁止捲動：在選單開啟時，通常需要禁止背景頁面捲動。這點純 CSS 較難完美達成（除非使用 has() 選擇器），在實務上往往會搭配一兩行 JavaScript 來幫 <body> 加上 overflow: hidden。
  3. 可訪問性：確保選單內的連結可以透過鍵盤 Tab 鍵選取，並在關閉後焦點能回到原處。
現代瀏覽器支援 transition 的屬性非常多，但為了效能考量，建議盡量針對 transform 和 opacity 進行動畫開發。