TadMenu 垂直三層選單

符合 WCAG 2.2 AAA 無障礙規範的響應式選單元件

✨ 功能特色

  • 三層選單結構
  • 第二層滑動展開動畫
  • 第三層浮動顯示（桌面版）
  • 第三層展開顯示（手機版）
  • JSON 設定檔驅動
  • 完整鍵盤導覽
  • WCAG 2.2 AAA 規範
  • Font Awesome 圖示

🚀 使用方式

// 初始化 TadMenu
const menu = new TadMenu('tadmenu-container', {
  jsonPath: 'menu-data.json',
  animationDuration: 300,
  mainContentId: 'main-content'
});

// 展開指定選單
menu.expand('products');

// 收合所有選單
menu.collapseAll();

// 銷毀選單
menu.destroy();

⌨️ 鍵盤操作

按鍵 功能
↑ ↓ 在同層選項間移動
→ 展開子選單並進入
← 收合選單或返回上層
Enter Space 展開/收合或啟動連結
Home 跳到第一個選項
End 跳到最後一個選項
Esc 關閉浮動選單

📋 測試步驟

  1. 點擊「產品服務」展開第二層
  2. 點擊「軟體開發」或「設計服務」查看第三層浮動選單
  3. 縮小視窗至手機寬度，觀察第三層改為展開式