วิธีสร้าง Responsive Navigation Menu พร้อม Login Form ด้วย CSS และ JavaScript

สร้าง Navigation Bar ที่ Responsive และมี Login Form ติดอยู่ใน Navbar เอง - บน Desktop แสดงแนวนอน, บน Mobile Stack แนวตั้ง

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

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Nav with Login Form</title>
  <style>
    * { box-sizing: border-box; }
    
    body {
      margin: 0;
      padding-top: 60px; /* เว้นที่สำหรับ Fixed Nav */
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }
    
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background-color: #272727;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      z-index: 1000;
      flex-wrap: wrap; /* รองรับ Mobile Wrap */
    }
    
    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }
    
    .nav-link {
      display: inline-block;
      padding: 10px 16px;
      color: #b289fd;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      border-radius: 4px;
      transition: background-color 0.2s, color 0.2s;
      white-space: nowrap;
    }
    
    .nav-link:hover,
    .nav-link:focus {
      background-color: #646464;
      color: #fff;
    }
    
    .nav-link.selected {
      background-color: #00122b;
      color: #fff;
    }
    
    /* Login Form */
    .login-form {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
      flex-wrap: wrap;
    }
    
    .login-form input {
      padding: 8px 12px;
      font-size: 15px;
      border: 1px solid #444;
      border-radius: 4px;
      background-color: #1a1a1a;
      color: #fff;
      min-width: 140px;
    }
    
    .login-form input::placeholder {
      color: #888;
    }
    
    .login-form input:focus {
      outline: none;
      border-color: #b289fd;
      box-shadow: 0 0 0 2px rgba(178, 137, 253, 0.2);
    }
    
    .login-form button {
      padding: 8px 16px;
      background-color: #b289fd;
      color: #00122b;
      font-weight: 600;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .login-form button:hover {
      background-color: #9d73f5;
    }
    
    /* Mobile Responsive */
    @media screen and (max-width: 768px) {
      nav {
        height: auto;
        padding: 12px 16px;
        gap: 12px;
      }
      
      .nav-links {
        width: 100%;
        order: 2;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
      }
      
      .nav-link {
        padding: 10px 14px;
        font-size: 15px;
      }
      
      .login-form {
        width: 100%;
        order: 3;
        margin-left: 0;
        justify-content: center;
      }
      
      .login-form input {
        width: 100%;
        min-width: 0;
      }
      
      .login-form button {
        width: 100%;
      }
    }
    
    @media screen and (max-width: 480px) {
      .nav-link span { display: none; } /* ซ่อนข้อความ แสดงแค่ Icon */
      .nav-link::before { content: attr(data-icon); margin-right: 4px; }
    }
  </style>
</head>
<body>
  <nav role="navigation" aria-label="Main Navigation">
    <div class="nav-links">
      <a class="nav-link selected" href="#" data-icon="🏠"><span>หน้าแรก</span></a>
      <a class="nav-link" href="#" data-icon="👤"><span>เข้าสู่ระบบ</span></a>
      <a class="nav-link" href="#" data-icon="📝"><span>สมัครสมาชิก</span></a>
      <a class="nav-link" href="#" data-icon="📞"><span>ติดต่อเรา</span></a>
      <a class="nav-link" href="#" data-icon="ℹ️"><span>ข้อมูลเพิ่มเติม</span></a>
    </div>
    
    <form class="login-form" action="#" method="POST">
      <input type="text" name="username" placeholder="ชื่อผู้ใช้..." autocomplete="username" required>
      <input type="password" name="password" placeholder="รหัสผ่าน..." autocomplete="current-password" required>
      <button type="submit">เข้าสู่ระบบ</button>
    </form>
  </nav>
  
  <main>
    <h1>Responsive Navigation with Login Form</h1>
    <p>ลองปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดู Responsive Behavior</p>
  </main>
</body>
</html>

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

• ✅ Fixed Top Navigation - ติดบนสุดตลอดเวลา
• ✅ Integrated Login Form - ฟอร์มล็อกอินอยู่ใน Navbar
• ✅ Fully Responsive - Flexbox + Media Queries
• ✅ Desktop: แนวนอน, Link ซ้าย, Form ขวา
• ✅ Tablet: Stack แนวตั้ง, Form กว้างเต็ม
• ✅ Mobile: Compact, Form Stack แนวตั้งเต็มความกว้าง
• ✅ Accessible - Semantic HTML, ARIA, Focus Styles, Autocomplete

// เพิ่ม Hamburger Toggle สำหรับ Mobile
const hamburger = document.createElement('button');
hamburger.className = 'hamburger';
hamburger.innerHTML = '☰';
hamburger.setAttribute('aria-label', 'Toggle Menu');
hamburger.addEventListener('click', () => {
  navLinks.classList.toggle('open');
});

const loginForm = document.querySelector('.login-form');
loginForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(loginForm);
  // ส่งไป API, จัดการ Response, Token Storage, Redirect
});

:root {
  --nav-bg: #272727;
  --nav-link-color: #b289fd;
  --nav-link-hover: #646464;
  --nav-active-bg: #00122b;
  --input-bg: #1a1a1a;
  --primary-color: #b289fd;
}

@media (prefers-color-scheme: light) {
  :root {
    --nav-bg: #f8f9fa;
    --nav-link-color: #333;
    --nav-link-hover: #e9ecef;
    --nav-active-bg: #00122b;
    --input-bg: #fff;
    --primary-color: #6c5ce7;
  }
}