วิธีสร้าง Bottom Navigation Menu แบบ Responsive ด้วย CSS และ JavaScript

สร้าง Navigation Bar ติดด้านล่าง (Bottom Nav) ที่ Responsive - บน Desktop แสดงเต็ม, บน Mobile แสดงแท็บแรก + Hamburger Menu

โค้ดตัวอย่างสมบูรณ์

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Bottom Navigation</title>
  <style>
    * { box-sizing: border-box; }
    
    body {
      margin: 0;
      padding: 0;
      padding-bottom: 60px; /* เว้นที่สำหรับ Bottom Nav */
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }
    
    nav.bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #272727;
      overflow: hidden;
      z-index: 1000;
      display: flex;
      align-items: center;
    }
    
    .nav-link {
      display: inline-block;
      text-align: center;
      padding: 14px 16px;
      color: #b289fd;
      text-decoration: none;
      font-size: 17px;
      white-space: nowrap;
      flex: 1;
    }
    
    .nav-link:hover,
    .nav-link:focus {
      background-color: #646464;
      color: #fff;
    }
    
    .nav-link.selected {
      background-color: #00122b;
      color: #fff;
    }
    
    /* Hamburger Button - ซ่อนบน Desktop */
    .hamburger {
      display: none;
      color: white;
      font-weight: bold;
      font-size: 24px;
      padding: 12px 16px;
      cursor: pointer;
      background: none;
      border: none;
    }
    
    /* Mobile Styles */
    @media screen and (max-width: 600px) {
      .nav-link:not(:first-child):not(.hamburger) {
        display: none; /* ซ่อนลิงก์อื่นๆ */
      }
      
      .nav-link.hamburger {
        display: block;
        flex: none;
        margin-left: auto;
      }
      
      /* เมื่อเปิดเมนู (openNav class) */
      nav.openNav .nav-link {
        display: block;
        flex: 1;
        width: 100%;
        text-align: left;
        padding: 16px;
        border-top: 1px solid #444;
      }
      
      nav.openNav .nav-link:first-child {
        border-top: none;
      }
      
      nav.openNav .hamburger {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1001;
      }
    }
  </style>
</head>
<body>
  <nav class="bottom-nav" id="bottomNav">
    <a class="nav-link selected" href="#">หน้าแรก</a>
    <a class="nav-link" href="#">เข้าสู่ระบบ</a>
    <a class="nav-link" href="#">สมัครสมาชิก</a>
    <a class="nav-link" href="#">ติดต่อเรา</a>
    <a class="nav-link" href="#">ข้อมูลเพิ่มเติม</a>
    <button class="nav-link hamburger" aria-label="Toggle Menu">☰</button>
  </nav>
  
  <div class="content">
    <h1>Bottom Navigation Menu</h1>
    <p>ลองปรับขนาดหน้าต่างเบราว์เซอร์ < 600px แล้วกด Hamburger</p>
  </div>
  
  <script>
    const nav = document.getElementById('bottomNav');
    const hamburger = nav.querySelector('.hamburger');
    
    hamburger.addEventListener('click', toggleNav);
    
    function toggleNav() {
      nav.classList.toggle('openNav');
      
      // อัปเดต aria-expanded สำหรับ Accessibility
      const isOpen = nav.classList.contains('openNav');
      hamburger.setAttribute('aria-expanded', isOpen);
      hamburger.textContent = isOpen ? '✕' : '☰';
    }
    
    // ปิดเมนูเมื่อคลิกลิงก์ (Mobile)
    nav.querySelectorAll('.nav-link:not(.hamburger)').forEach(link => {
      link.addEventListener('click', () => {
        if (window.innerWidth <= 600) {
          nav.classList.remove('openNav');
          hamburger.setAttribute('aria-expanded', 'false');
          hamburger.textContent = '☰';
        }
      });
    });
    
    // ปิดเมนูเมื่อ Resize กลับเป็น Desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth > 600) {
        nav.classList.remove('openNav');
      }
    });
  </script>
</body>
</html>

คุณสมบัติหลัก

• ✅ Fixed Bottom - ติดด้านล่างจอตลอดเวลา
• ✅ Responsive - Desktop: แสดงเต็ม, Mobile: Hamburger Menu
• ✅ Accessible - ARIA attributes, Keyboard navigation
• ✅ Smooth Animation - CSS Transition (เพิ่มได้ใน .openNav)
• ✅ Auto-close - ปิดเมนูเมื่อคลิกลิงก์หรือ Resize กลับ Desktop

การเพิ่ม Animation (แนะนำ)

/* เพิ่มใน CSS */
nav.bottom-nav {
  /* ...existing styles... */
}

@media screen and (max-width: 600px) {
  .nav-link:not(:first-child):not(.hamburger) {
    /* ...existing styles... */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  
  nav.openNav .nav-link:not(:first-child):not(.hamburger) {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Stagger Animation Delay */
  nav.openNav .nav-link:nth-child(2) { transition-delay: 0.05s; }
  nav.openNav .nav-link:nth-child(3) { transition-delay: 0.1s; }
  nav.openNav .nav-link:nth-child(4) { transition-delay: 0.15s; }
  nav.openNav .nav-link:nth-child(5) { transition-delay: 0.2s; }
}

กรณีใช้งานจริง

• Mobile Web Apps (PWA)
• Single Page Applications (SPA)
• เว็บไซต์ที่เน้นการนำทางหลัก 3-5 เมนู
• แทนที่ Tab Bar ใน Native Apps