Cách TO - Nút Khác trong Thanh điều hướng
Tìm hiểu cách tạo nút "thêm".
Nút "Thêm" trong Thanh điều hướng
Tạo một thanh điều hướng thả xuống
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">More
<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>
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>) để tạo menu thả xuống và thêm các liên kết thả xuống bên trong nó.
Quấn phần tử <div> xung quanh nút và <div> để đị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-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;
}
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
là vùng chứa cho
.dropdown-content
. Vì đây là phần tử <div> chứ không phải phần tử <a>, chúng tôi 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
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). Lưu ý rằng min-width
được đặt thành 160px. Hãy thay đổi điều này.
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 trang liên quan
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.