Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách tạo Mega Menu chuyên nghiệp chỉ với HTML và CSS. Đây là một kỹ thuật thường dùng trên các website lớn như ecommerce, website giáo dục hoặc các nền tảng nội dung chuyên sâu.

1. Mega Menu là gì?

Mega Menu là dạng menu mở rộng khi hover hoặc click vào mục menu chính, hiển thị nhiều liên kết con dưới dạng lưới (grid). Khác với dropdown thông thường chỉ có 1 cột, Mega Menu có thể chứa:

  • Nhiều cột (multi-columns)
  • Hình ảnh, icon, mô tả ngắn
  • Phân loại nhóm liên kết rõ ràng

Mega Menu giúp người dùng dễ dàng điều hướng và truy cập nhanh tới nhiều chuyên mục.

2. HTML cấu trúc Mega Menu

Dưới đây là mã HTML cơ bản cho Mega Menu:

html
<div class="navbar">
  <a href="https://codetuthub.com">Trang chủ</a>
  <a href="https://codetuthub.com/gioi-thieu">Giới thiệu</a>

  <div class="dropdown">
    <button class="dropdown-btn">Khóa học
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Front-end Developer</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>HTML/CSS</h3>
          <a href="#">Khóa học HTML5 cơ bản</a>
          <a href="#">Flexbox & Grid chuyên sâu</a>
          <a href="#">Responsive Web Design</a>
        </div>
        <div class="column">
          <h3>JavaScript</h3>
          <a href="#">JavaScript từ A đến Z</a>
          <a href="#">DOM & Event Handling</a>
          <a href="#">Async & API Fetch</a>
        </div>
        <div class="column">
          <h3>ReactJS</h3>
          <a href="#">React căn bản</a>
          <a href="#">React Hooks chuyên sâu</a>
          <a href="#">Next.js cơ bản</a>
        </div>
      </div>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropdown-btn">Tài nguyên
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Thư viện & Công cụ</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Design</h3>
          <a href="#">Figma UI Kit</a>
          <a href="#">Icon miễn phí</a>
          <a href="#">Color Palette</a>
        </div>
        <div class="column">
          <h3>Code Snippet</h3>
          <a href="#">Form validation JS</a>
          <a href="#">Mega Menu Template</a>
          <a href="#">Loading animation CSS</a>
        </div>
        <div class="column">
          <h3>Plugin</h3>
          <a href="#">Slider JS</a>
          <a href="#">Toast Notification</a>
          <a href="#">Lightbox Gallery</a>
        </div>
      </div>
    </div>
  </div>

  <a href="https://codetuthub.com/contact-us">Liên hệ</a>
</div>

3. CSS thiết kế Mega Menu

Để Mega Menu hoạt động và hiển thị đẹp, bạn cần style bằng CSS như sau:

css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  padding: 1rem;
}

.navbar {
  overflow: hidden;
  background-color: darkslategrey;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropdown-btn {
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropdown-btn {
  background-color: lightcoral;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: lightcoral;
  padding: 1rem;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}

HTML và CSS hoàn chỉnh sẽ như sau (bạn có thể copy và dán phần CSS vào tệp css cho dễ quản lý):

html
Thử online
<!DOCTYPE html>
<html>
<head>
  <title>Mega menu - CodeTutHub</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    header {
      padding: 1rem;
    }

    .navbar {
      overflow: hidden;
      background-color: darkslategrey;
    }

    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropdown-btn {
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font: inherit;
      margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropdown-btn {
      background-color: lightcoral;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      width: 100%;
      left: 0;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content .header {
      background: lightcoral;
      padding: 1rem;
      color: white;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      background-color: #ccc;
      height: 250px;
    }

    .column a {
      float: none;
      color: black;
      padding: 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .column a:hover {
      background-color: #ddd;
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        height: auto;
      }
    }

  </style>
</head>
<body>
<header>
  <div class="logo"><a href="https://codetuthub.com">CodeTutHub</a></div>
</header>
<div class="navbar">
  <a href="https://codetuthub.com">Trang chủ</a>
  <a href="https://codetuthub.com/gioi-thieu">Giới thiệu</a>

  <div class="dropdown">
    <button class="dropdown-btn">Khóa học
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Front-end Developer</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>HTML/CSS</h3>
          <a href="#">Khóa học HTML5 cơ bản</a>
          <a href="#">Flexbox & Grid chuyên sâu</a>
          <a href="#">Responsive Web Design</a>
        </div>
        <div class="column">
          <h3>JavaScript</h3>
          <a href="#">JavaScript từ A đến Z</a>
          <a href="#">DOM & Event Handling</a>
          <a href="#">Async & API Fetch</a>
        </div>
        <div class="column">
          <h3>ReactJS</h3>
          <a href="#">React căn bản</a>
          <a href="#">React Hooks chuyên sâu</a>
          <a href="#">Next.js cơ bản</a>
        </div>
      </div>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropdown-btn">Tài nguyên
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Thư viện & Công cụ</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Design</h3>
          <a href="#">Figma UI Kit</a>
          <a href="#">Icon miễn phí</a>
          <a href="#">Color Palette</a>
        </div>
        <div class="column">
          <h3>Code Snippet</h3>
          <a href="#">Form validation JS</a>
          <a href="#">Mega Menu Template</a>
          <a href="#">Loading animation CSS</a>
        </div>
        <div class="column">
          <h3>Plugin</h3>
          <a href="#">Slider JS</a>
          <a href="#">Toast Notification</a>
          <a href="#">Lightbox Gallery</a>
        </div>
      </div>
    </div>
  </div>

  <a href="https://codetuthub.com/contact-us">Liên hệ</a>
</div>

</body>
</html>

4. Một số lưu ý khi tạo Mega Menu

  • Đảm bảo giao diện responsive trên di động (có thể cần thêm CSS Media Query).
  • Tránh nhồi nhét quá nhiều liên kết khiến người dùng rối mắt.
  • Nên nhóm các liên kết có liên quan vào cùng một cột.
  • Ưu tiên tốc độ load nhanh, tránh sử dụng quá nhiều hình ảnh lớn.

5. Kết luận

Mega Menu giúp website của bạn chuyên nghiệp hơn và cải thiện trải nghiệm người dùng rất nhiều. Chỉ với HTML và CSS cơ bản, bạn hoàn toàn có thể tự xây dựng một Mega Menu đẹp mắt, phù hợp với nhu cầu của mình.

Chúc bạn thành công trong việc triển khai Mega Menu cho website!

Nếu bạn thấy bài viết hữu ích, hãy theo dõi thêm các hướng dẫn lập trình tại CodeTutHub.com nhé!