Cách thực hiện - Thanh điều hướng thả xuống
Tìm hiểu cách tạo thanh điều hướng thả xuống.
Menu thả xuống trong thanh điều hướng
Tạo thanh điều hướng thả xuống
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">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</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>) để tạo menu thả xuống và thêm các liên kết thả xuống bên trong nó.
Bao bọc phần tử <div> xung quanh nút và <div> để đị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-family:
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;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
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
là nơi chứa .dropdown-content
. Vì đây là phần tử <div> chứ không phải phần tử <a> nên chúng ta phải thả nổi nó để đảm bảo rằng nó nằm bên cạnh các liên kết.
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). Lưu ý min-width
được đặt thành 160px. Hãy thoải mái thay đổi điều này.
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.
Trình đơn thả xuống có thể nhấp trong Thanh điều hướng
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.