Cách tạo: Menu lớn

Học cách tạo menu lớn (menu thả toàn chiều rộng trong thanh điều hướng).

Tạo menu lớn

Tạo một menu thả, khi người dùng di chuột qua phần tử trong thanh điều hướng sẽ hiển thị menu đó.

Bước 1 - Thêm HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Liên kết 1</a>
          <a href="#">Liên kết 2</a>
          <a href="#">Liên kết 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Liên kết 1</a>
          <a href="#">Liên kết 2</a>
          <a href="#">Liên kết 3</a>
        </div>
        <div class="column">
          <h3>Danh mục 3</h3>
          <a href="#">Liên kết 1</a>
          <a href="#">Liên kết 2</a>
          <a href="#">Liên kết 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Ví dụ minh họa:

Bạn có thể sử dụng bất kỳ phần tử nào để mở menu thả, ví dụ như phần tử <button>, <a> hoặc <p>.

Sử dụng phần tử容器 (như <div class="dropdown-content">) để tạo menu thả, và thêm lưới (cột), sau đó thêm liên kết menu thả vào lưới.

Sử dụng phần tử <div class="dropdown"> để bao bọc nút và phần tử容器 (<div class="dropdown-content">) để định vị chính xác menu thả bằng CSS.

Bước 2 - Thêm CSS:

/* 导航栏容器 */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* 导航栏内的链接 */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 下拉菜单容器 */
.dropdown {
  float: left;
  overflow: hidden;
}
/* 下拉菜单按钮 */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* 对手机端的垂直对齐很重要 */
  margin: 0; /* 对手机端的垂直对齐很重要 */
}
/* 鼠标悬停时为导航栏链接添加红色背景色 */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* 下拉列表内容（默认隐藏） */
.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: red;
  padding: 16px;
  color: white;
}
/* Hiển thị menu thả khi di chuột trỏ */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Tạo ba cột bằng nhau và đặt chúng nổi song song */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Thiết lập樣式 cho liên kết trong cột */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Thêm màu nền khi di chuột trỏ */
.column a:hover {
  background-color: #ddd;
}
/* Xóa nổi sau cột */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Thử ngay

Ví dụ minh họa:

Chúng tôi đã thiết lập các樣式 như màu nền, lề trong cho thanh điều hướng và liên kết điều hướng.

Chúng tôi đã thiết lập các樣式 như màu nền, lề trong cho nút menu thả.

.dropdown-content Lớp chứa menu thả thực tế. Nó mặc định ẩn và sẽ hiển thị khi di chuột trỏ (xem dưới). Nó được định vị dưới nút menu thả và độ rộng được thiết lập là 100% để che phủ toàn bộ màn hình.

Chúng tôi không sử dụng viền mà sử dụng box-shadow giúp menu thả trông như một thẻ. Chúng tôi cũng sử dụng Thuộc tính Đặt menu thả ở trước các yếu tố khác.

:hover Chọn器 được sử dụng để hiển thị menu thả khi người dùng di chuột lên nút menu thả.

.column Lớp được sử dụng để tạo ba cột nổi song song trong menu thả (để hiển thị các danh mục khác nhau).

Trang liên quan

Hướng dẫn:Menu thả xuống CSS

Hướng dẫn:Cách tạo menu thả có thể nhấp

Hướng dẫn:Thanh điều hướng CSS

Hướng dẫn:Cách tạo thanh điều hướng đầu trang tương ứng