Cách thực hiện - Menu Mega
Tìm hiểu cách tạo một menu lớn (menu thả xuống có chiều rộng đầy đủ trong thanh điều hướng).
Thực đơn lớn
Tạo một menu Mega
Tạo menu thả xuống xuất hiện khi người dùng di chuyển chuột qua một phần tử bên trong thanh điều hướng.
Bước 1) Thêm HTML:
Ví 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>
Ví dụ giải thích
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) cũng như thêm liên kết thả xuống bên trong lưới.
Bao bọc phần tử <div class="dropdown"> xung quanh nút và phần tử vùng chứa (<div class="dropdown-content"> để định vị chính xác menu thả xuống bằng CSS.
Bước 2) Thêm CSS:
Ví 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;
}
Hãy tự mình thử »Ví dụ giải thích
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
chứa menu thả xuống thực tế. Nó được ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Nó được định vị để hiển thị 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 tính box-shadow
để làm cho menu thả xuống trông giống như một "thiệp". Chúng tôi cũng sử dụng chỉ mục z để đặt danh sách thả xuống phía trước các phần tử khác.
Bộ chọn :hover
đượ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 lớp .column
được sử dụng để tạo ba cột nổi cạnh nhau bên trong menu thả xuống (để hiển thị các danh mục khác nhau).
Menu Mega đáp ứng
Ví 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;
}
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn thả xuống CSS của chúng tôi để tìm hiểu thêm về danh sách 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: Hãy truy cập 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 phản hồi hàng đầu của chúng tôi để tìm hiểu về cách tạo thanh điều hướng phản hồi nhanh.