CÁCH LÀM - Mega Menu
Tìm hiểu cách tạo menu lớn (menu thả xuống toàn chiều rộng trong thanh điều hướng).
Menu Mega
Tạo một Mega Menu
Tạo menu thả xuống xuất hiện khi người dùng di chuột qua một phần tử bên trong thanh điều hướng.
Bước 1) Thêm HTML:
Thí dụ
<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="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
Giải thích ví dụ
Sử dụng bất kỳ phần tử nào để mở menu thả xuống, ví dụ: phần tử <button>, <a> hoặc <p>.
Sử dụng phần tử vùng chứa (như <div class = "dropdown-content">) để tạo menu thả xuống và thêm lưới (cột) và thêm liên kết thả xuống bên trong lưới.
Quấn phần tử <div class = "dropdown"> xung quanh nút và phần tử vùng chứa (<div class = "dropdown-content"> để định vị trình đơn thả xuống một cách chính xác với CSS.
Bước 2) Thêm CSS:
Thí dụ
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
/* Important for vertical align on mobile phones */
margin: 0; /*
Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.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;
}
/* Mega Menu header, if needed */
.dropdown-content
.header {
background: red;
padding: 16px;
color: white;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links
inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background
color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Giải thích ví dụ
Chúng tôi đã tạo kiểu cho thanh điều hướng và các liên kết thanh điều hướng bằng màu nền, phần đệm, v.v.
Chúng tôi đã tạo kiểu cho nút thả xuống bằng màu nền, phần đệm, v.v.
Lớp .dropdown-content
giữ menu thả xuống thực tế. Nó bị ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Nó được đặt để có thể nhìn thấy ngay bên dưới nút thả xuống và chiều rộng được đặt thành 100% để bao phủ toàn bộ màn hình.
Thay vì sử dụng đường viền, chúng tôi đã sử dụng thuộc box-shadow
tính để làm cho menu thả xuống trông giống như một "thẻ". Chúng tôi cũng sử dụng z-index để đặt menu thả xuống trước các phần tử khác.
Bộ :hover
chọn được sử dụng để hiển thị menu thả xuống khi người dùng di chuyển chuột qua nút thả xuống.
Các .column
lớp được sử dụng để tạo ba cột nổi cạnh nhau bên trong trình đơn thả xuống (để hiển thị các danh mục khác nhau).
Menu Mega đáp ứng
Thí dụ
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height:
auto;
}
}
Mẹo: Đi tới Hướng dẫn CSS thả xuống của chúng tôi để tìm hiểu thêm về trình đơn thả xuống.
Mẹo: Đi tới Danh sách thả xuống có thể nhấp của chúng tôi để tìm hiểu thêm về danh sách thả xuống có thể nhấp
Mẹo: Đi tới Hướng dẫn về thanh điều hướng CSS của chúng tôi để tìm hiểu thêm về thanh điều hướng.
Mẹo: Đi tới Điều hướng hàng đầu thích ứng của chúng tôi để tìm hiểu về cách tạo thanh điều hướng đáp ứng.