Cách thực hiện - Trình đơn thả xuống có thể lưu trữ
Tìm hiểu cách tạo menu thả xuống có thể di chuyển bằng CSS.
Trình đơn thả xuống
Menu thả xuống là menu có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước:
Tạo một trình đơn thả xuống có thể lưu trữ
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ước 1) Thêm HTML:
Thí dụ
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</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ụ
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f1f1f1;
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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the
dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown
button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
Giải thích ví dụ
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
sử dụng position:relative
, cần thiết khi chúng ta muốn nội dung thả xuống được đặt ngay bên dưới nút thả xuống (đang sử dụng position:absolute
).
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. Mẹo: Nếu bạn muốn chiều rộng của nội dung thả xuống rộng bằng nút thả xuống, hãy đặt thành width
100% (và overflow:auto
cho phép cuộn trên màn hình 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ăn phải thả xuống
Thí dụ
Menu thả xuống trong Navbar
Thí dụ
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