Trình đơn thả CSS
- Trang trước Thanh điều hướng ngang CSS
- Trang tiếp theo Thư viện hình ảnh CSS
Tạo danh sách cuộn có thể trỏ chuột bằng CSS.
Hiển thị: Ví dụ về trường hợp cuộn
Mẫu
Hãy di chuột vào ví dụ dưới đây:
Menu cuộn cơ bản
Tạo hộp cuộn xuất hiện khi người dùng di chuột qua yếu tố.
Mẫu
<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>Chuột trỏ vào tôi</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Giải thích ví dụ:
HTML
Mở nội dung menu cuộn bằng bất kỳ yếu tố nào, ví dụ như phần tử <span> hoặc <button>.
Tạo nội dung cuộn bằng phần tử chứa (như <div>) và thêm bất kỳ nội dung nào vào đó.
bọc các yếu tố này bằng phần tử <div>, và định vị nội dung cuộn một cách chính xác bằng CSS.
CSS
.dropdown lưu trữ position:relativekhi chúng ta muốn đặt nội dung cuộn dưới nút cuộn (sử dụng position:absolutekhi đó, bạn cần sử dụng lớp này.
.dropdown-content lưu trữ nội dung thực tế của menu cuộn. Mặc định, nó ẩn và sẽ hiển thị khi trỏ chuột (xem dưới đây). Lưu ý rằngmin-width Đặt thành 160px. Bạn có thể thay đổi cài đặt này bất kỳ lúc nào. Lưu ý: Nếu bạn muốn độ rộng của nội dung cuộn bằng với độ rộng của nút cuộn, hãy đặt độ rộng thành 100％ (đặt overflow:auto Có thể cuộn trên màn hình nhỏ.
Chúng ta đã sử dụng CSS box-shadow Thuộc tính, thay vì viền, để menu thả xuống trông như một tấm "thẻ".
Khi người dùng di chuột đến nút thả xuống,:hover Chọn器 được sử dụng để hiển thị menu thả xuống.
Menu thả xuống
Tạo một menu thả xuống và 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ên, trừ khi chúng ta thêm liên kết vào khung thả xuống và đặt樣式 cho nó để khớp với樣式 của nút thả xuống:
Mẫu
<style>
/* Đặt樣式 cho nút thả xuống */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Khung <div> - cần đặt nội dung thả xuống trong đó */
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung thả xuống (mặc định ẩn) */
.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;
}
/* Liên kết thả xuống */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Thay đổi màu của liên kết khi trỏ chuột */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Hiển thị menu thả xuống khi trỏ chuột */
.dropdown:hover .dropdown-content {
display: block;
}
/* Hiển thị nội dung thả xuống khi thay đổi màu nền của nút thả xuống */
.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 menu thả phải ngang
Nếu bạn muốn menu thả từ phải sang trái thay vì từ trái sang phải, hãy thêm right: 0;:
Mẫu
.dropdown-content {
right: 0;
}
Các ví dụ khác
1 - Hình ảnh thả
Cách thêm hình ảnh và nội dung khác vào hộp thả.
Mời bạn di chuột qua hình ảnh:
2 - Menu thả
Cách thêm menu thả trong thanh điều hướng.
- Trang trước Thanh điều hướng ngang CSS
- Trang tiếp theo Thư viện hình ảnh CSS
