Bài 27: Thiết kế header + menu responsive

Trong thực tế, header là phần đầu tiên người dùng nhìn thấy khi vào website. Nó thường bao gồm:

• Logo
• Menu điều hướng
• Nút gọi hành động (CTA), tìm kiếm, hoặc giỏ hàng

Trong bài học này, bạn sẽ học cách:

• Tạo header cố định
• Thiết kế menu ngang cho desktop
• Làm menu hamburger cho mobile
• Áp dụng kiến thức về Flexbox và Media Queries

1. Cấu trúc HTML cơ bản

📋 Copy<header class="site-header">
  <div class="container">
    <div class="logo">MySite</div>
    <nav class="main-nav">
      <ul>
        <li><a href="#">Trang chủ</a></li>
        <li><a href="#">Giới thiệu</a></li>
        <li><a href="#">Dịch vụ</a></li>
        <li><a href="#">Liên hệ</a></li>
      </ul>
    </nav>
    <div class="menu-toggle">&#9776;</div>
  </div>
</header>

2. CSS: Giao diện trên desktop

📋 Copy.site-header {
  background: #2c3e50;
  color: white;
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.main-nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

.main-nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

3. Responsive menu cho mobile

📋 Copy@media (max-width: 768px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #34495e;
    padding: 20px;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 12px;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav.active {
    display: block;
  }
}

4. JavaScript để toggle menu

(Tối giản, dễ hiểu)

📋 Copy<script>
  const toggle = document.querySelector('.menu-toggle');
  const nav = document.querySelector('.main-nav');

  toggle.addEventListener('click', () => {
    nav.classList.toggle('active');
  });
</script>

5. Kết quả mong đợi

• Trên desktop: menu hiển thị ngang, cố định trên đầu
• Trên mobile: có nút ☰ hiện menu ẩn/hiện
• Dùng Flexbox để căn giữa các phần tử
• Dùng Media Queries để điều chỉnh layout theo màn hình

6. Gợi ý mở rộng

• Thêm hiệu ứng trượt menu
• Thêm biểu tượng SVG thay vì ký hiệu ☰
• Thêm icon tìm kiếm hoặc giỏ hàng vào header
• Tạo hiệu ứng shadow khi scroll

Tóm tắt bài học