Trình đơn thả xuống CSS
Tạo danh sách thả xuống có thể lưu trữ với CSS.
Demo: Ví dụ thả xuống
Di chuyển chuột qua các ví dụ dưới đây:
Cơ bản thả xuống
Tạo một hộp thả xuống xuất hiện khi người dùng di chuyển chuột qua một phần tử.
Thí dụ
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:
12px 16px;
z-index: 1;
}
.dropdown:hover
.dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Giải thích ví dụ
HTML) Sử dụng bất kỳ phần tử nào để mở nội dung thả xuống, ví dụ: phần tử <span> hoặc <button>.
Sử dụng một phần tử vùng chứa (như <div>) để tạo nội dung thả xuống và thêm bất cứ thứ gì bạn muốn vào bên trong nó.
Quấn phần tử <div> xung quanh các phần tử để định vị chính xác nội dung thả xuống bằng CSS.
CSS) Lớp .dropdownsử 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 (sử dụng position:absolute).
Lớp .dropdown-contentnày chứa nội dung thả xuống thực sự. 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 width100% (và overflow:autocho 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 tính CSS box-shadowđể làm cho menu thả xuống trông giống như một "thẻ".
Bộ :hoverchọ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.
Trình đơn thả xuống
Tạo menu thả xuống cho phép người dùng chọn một tùy chọn từ danh sách:
Ví dụ này tương tự như ví dụ trước, ngoại trừ việc chúng tôi thêm các liên kết bên trong hộp thả xuống và tạo kiểu cho chúng vừa với nút thả xuống theo kiểu:
Thí dụ
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 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: #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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 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;
}
</style>
<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>
Nội dung thả xuống căn phải
Nếu bạn muốn menu thả xuống đi từ phải sang trái, thay vì từ trái sang phải, hãy thêmright: 0;
Thí dụ
.dropdown-content {
right: 0;
}
Các ví dụ khác
Hình ảnh thả xuống
Cách thêm hình ảnh và nội dung khác bên trong hộp thả xuống.
Di chuột qua hình ảnh:
Thanh điều hướng thả xuống
Cách thêm menu thả xuống bên trong thanh điều hướng.