下拉選單怎麼做？三層式選單製作完整指南

為什麼需要三層式下拉選單？

三層式下拉選單該怎麼做？網路上找的三層選單有很多種不同的收闔方式，不是我想要的…

今天整理三種不同的 Menu 選單，找一個最適合的開始動手嘗試吧！這些選單都能讓你的網站導航更簡單、更高效。

三層式下拉選單類型

根據展開方向和使用情境，我們提供三種主要的下拉選單設計：

1. 直向展開（往下開）

適合橫向導航列使用，常見於網站頂部導航

2. 橫向展開（往右開）

適合側邊欄導航，節省垂直空間

3. 混合展開（往下往右開）

結合兩種方式，適合複雜的多層級導航

方法一：直向展開下拉選單

這種方式適合網站頂部的主導航選單，用戶操作直覺。

特色：

• 垂直展開，符合用戶閱讀習慣
• 適合桌面版網站的頂部導航
• 結構清晰，層級關係明顯

HTML 結構要點：

<ul class="dropdown-menu">
  <li class="dropdown-item">
    <label for="level1-checkbox">第一層</label>
    <input id="level1-checkbox" type="checkbox" class="hidden">
    <ul class="submenu">
      <li class="submenu-item">
        <label for="level2-checkbox">第二層</label>
        <input id="level2-checkbox" type="checkbox" class="hidden">
        <ul class="sub-submenu">
          <li>第三層</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS 關鍵設定：

.submenu {
  display: none; /* 預設隱藏 */
}

.dropdown-item input:checked + .submenu {
  display: block; /* 勾選時顯示 */
}

方法二：橫向展開下拉選單

這種方式適合側邊欄導航，能有效利用橫向空間。

特色：

• 橫向展開，節省垂直空間
• 適合側邊欄或移動裝置導航
• 視覺層次分明

關鍵 CSS 設定：

.submenu {
  position: absolute;
  top: 0;
  left: 100%; /* 在右側展開 */
  display: none;
}

.dropdown-item:hover .submenu,
.dropdown-item input:checked + .submenu {
  display: block;
}

使用技巧：

• 使用 position: absolute 定位子選單
• left: 100% 讓選單在右側展開
• 可搭配 z-index 控制層級順序

方法三：混合展開下拉選單

結合直向和橫向展開的優勢，適合複雜的導航結構。

特色：

• 第一層向下展開
• 第二、三層向右展開
• 適合內容豐富的大型網站

實作邏輯：

/* 第一層：向下展開 */
.level1-submenu {
  position: static;
  display: none;
}

/* 第二、三層：向右展開 */
.level2-submenu, .level3-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}

適用情境：

• 電商網站的商品分類
• 企業官網的服務項目
• 複雜的後台管理系統

實作技術要點

HTML 結構設計

使用語義化標籤：

<nav class="main-navigation">
  <ul class="nav-list">
    <li class="nav-item has-dropdown">
      <a href="#" class="nav-link">主選項</a>
      <ul class="dropdown-menu">
        <!-- 子選項 -->
      </ul>
    </li>
  </ul>
</nav>

CSS 核心技巧

1. 隱藏/顯示控制：

.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

2. 箭頭指示器：

.nav-link::after {
  content: '';
  border: solid transparent;
  border-width: 4px 4px 0;
  border-top-color: currentColor;
}

JavaScript 增強

添加鍵盤支持：

// 鍵盤導航支持
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeAllDropdowns();
  }
});

用戶體驗優化建議

響應式設計

桌面版 vs 移動版：

• 桌面版：使用 hover 觸發，支援滑鼠操作
• 移動版：使用點擊觸發，考慮觸控友好性

無障礙設計

鍵盤導航支持：

<li class="nav-item" role="menuitem">
  <a href="#" aria-haspopup="true" aria-expanded="false">
    主選項
  </a>
</li>

效能考量

CSS 優化：

• 使用 transform 而非 top/left 做動畫
• 避免過度使用 box-shadow 影響效能
• 合理使用 will-change 屬性

視覺回饋

互動狀態設計：

.nav-link:hover {
  background-color: #f5f5f5;
  color: #333;
}

.nav-link:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

選擇適合的方案

決策參考

選擇直向展開（往下開）當：

• 網站使用橫向頂部導航
• 內容層級不超過 3 層
• 桌面裝置為主要用戶群

選擇橫向展開（往右開）當：

• 使用側邊欄導航設計
• 需要節省垂直空間
• 移動裝置優先設計

選擇混合展開當：

• 導航內容複雜，層級較多
• 大型網站需要完整的導航結構
• 有充足的開發時間和資源

透過這三種三層式下拉選單的製作方法，你可以根據專案需求選擇最適合的導航方式，打造出流暢且用戶友好的網站導航體驗！