Cách thực hiện - Trình đơn thả xuống có thể nhấp
Tìm hiểu cách tạo menu thả xuống có thể nhấp bằng CSS và JavaScript.
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:
Hãy tự mình thử »Tạo danh sách thả xuống có thể nhấp
Tạo menu thả xuống xuất hiện khi người dùng nhấp vào nút.
Bước 1) Thêm HTML:
Ví dụ
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</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ụ
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* 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 (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
Ví dụ giải thích
Chúng tôi đã tạo kiểu cho nút thả xuống với màu nền, phần đệm, hiệu ứng di chuột, v.v.
Lớp .dropdown
sử dụng position:relative
, điều này 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-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. 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 width
thành 100% (và overflow:auto
để bật 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 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ước 3) Thêm JavaScript:
Ví dụ
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Hãy tự mình thử »Danh sách thả xuống căn phải
Menu thả xuống trong thanh điều hướng
Danh sách thả xuống Tìm kiếm (Bộ lọc)
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ể di chuột của chúng tôi để tìm hiểu thêm về danh sách thả xuống có thể di chuột