MenuManager

ภาพรวม

MenuManager คือระบบจัดการ navigation menus ใน Now.js Framework รองรับ responsive menus, submenus และ touch devices

ใช้เมื่อ:

• ต้องการ navigation menu
• ต้องการ responsive hamburger menu
• ต้องการ dropdown submenus
• ต้องการ active state tracking

ทำไมต้องใช้:

• ✅ Responsive (mobile/desktop)
• ✅ Dropdown submenus
• ✅ Touch gesture support
• ✅ Keyboard navigation
• ✅ ARIA accessibility
• ✅ Auto-active state

การใช้งานพื้นฐาน

HTML Structure

<nav data-component="menu">
  <button class="menu-toggle">☰</button>
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li>
      <a href="/products">Products</a>
      <ul>
        <li><a href="/products/new">New</a></li>
        <li><a href="/products/sale">Sale</a></li>
      </ul>
    </li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Initialization

await MenuManager.init({
  breakpoint: 768,
  animationDuration: 200
});

การตั้งค่า

MenuManager.init({
  // Mobile breakpoint (px)
  breakpoint: 768,

  // Animation duration (ms)
  animationDuration: 100,

  // Touch swipe threshold (px)
  touchThreshold: 100,

  // Accessibility
  accessibility: {
    enabled: true,
    announceChanges: true,
    smoothFocus: true
  },

  // Hover delays
  hover: {
    openDelay: 100,
    closeDelay: 300
  }
});

Data Attributes

API อ้างอิง

MenuManager.createMenu(element)

สร้าง menu instance

Returns: string - Menu ID

MenuManager.openMenu(menu)

เปิด mobile menu

MenuManager.closeMenu(menu)

ปิด mobile menu

MenuManager.toggleMenu(menu)

Toggle mobile menu

MenuManager.openSubmenu(menu, button)

เปิด submenu

MenuManager.closeSubmenu(menu, button)

ปิด submenu

MenuManager.closeAllSubmenus(menu)

ปิด submenus ทั้งหมด

MenuManager.updateActiveMenu(path)

อัพเดท active state ตาม path

// After route change
MenuManager.updateActiveMenu('/products/new');

MenuManager.getMenu(menuId)

รับ menu instance

MenuManager.hasMenu(menuId)

ตรวจสอบ menu exists

Keyboard Navigation

การจัดรูปแบบ CSS

/* Menu container */
[data-component="menu"] {
  position: relative;
}

/* Menu list */
.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu > li {
  position: relative;
}

.menu a {
  display: block;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}

.menu a:hover {
  background: rgba(0,0,0,0.05);
}

/* Active state */
.menu a.active {
  color: #3b82f6;
  font-weight: 500;
}

/* Submenu */
.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.menu li:hover > ul {
  opacity: 1;
  visibility: visible;
}

/* Mobile toggle */
.menu-toggle {
  display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .menu {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    flex-direction: column;
    background: white;
    transition: left 0.3s;
  }

  .menu.open {
    left: 0;
  }

  .menu ul {
    position: static;
    box-shadow: none;
  }
}

ตัวอย่างการใช้งานจริง

Main Navigation

<header>
  <nav data-component="menu">
    <a href="/" class="logo">Logo</a>

    <button class="menu-toggle" aria-label="Menu">
      <span></span>
      <span></span>
      <span></span>
    </button>

    <ul class="menu">
      <li><a href="/">Home</a></li>
      <li>
        <button aria-expanded="false">Products ▼</button>
        <ul>
          <li><a href="/products/software">Software</a></li>
          <li><a href="/products/hardware">Hardware</a></li>
          <li><a href="/products/services">Services</a></li>
        </ul>
      </li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

Data-Driven Menu

<nav data-component="menu" data-source="api.menus">
  <!-- Menu will be rendered from API data -->
</nav>

<script>
// API response structure
const menus = [
  { label: 'Home', href: '/' },
  {
    label: 'Products',
    children: [
      { label: 'New', href: '/products/new' },
      { label: 'Sale', href: '/products/sale' }
    ]
  }
];
</script>

Sidebar Menu

<aside data-component="menu" class="sidebar-menu">
  <ul class="menu vertical">
    <li><a href="/dashboard">Dashboard</a></li>
    <li>
      <button>Settings</button>
      <ul>
        <li><a href="/settings/profile">Profile</a></li>
        <li><a href="/settings/security">Security</a></li>
      </ul>
    </li>
    <li><a href="/logout">Logout</a></li>
  </ul>
</aside>

ข้อควรระวัง

⚠️ 1. Submenu ต้องอยู่ใน li

<!-- ❌ Submenu อยู่ผิดที่ -->
<ul class="menu">
  <a href="#">Products</a>
  <ul>...</ul>
</ul>

<!-- ✅ Submenu ใน li -->
<ul class="menu">
  <li>
    <a href="#">Products</a>
    <ul>...</ul>
  </li>
</ul>

⚠️ 2. ARIA สำหรับ Accessibility

<!-- ❌ ไม่มี ARIA -->
<button>Menu</button>

<!-- ✅ มี ARIA -->
<button aria-expanded="false" aria-controls="main-menu">
  Menu
</button>

เอกสารที่เกี่ยวข้อง

• RouterManager - SPA routing
• AnimationManager - Animations