Cách thực hiện - Dropup
Tìm hiểu cách tạo menu thả xuống bằng CSS.
thả xuống
Menu thả xuống là một 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 một Dropup có thể di chuột
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:
Ví dụ
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-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ụ
/* Dropup Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The
container <div> - needed to position the dropup content */
.dropup {
position: relative;
display:
inline-block;
}
/* Dropup content (Hidden by Default) */
.dropup-content {
display: none;
position:
absolute;
bottom: 50px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the
dropup */
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropup links on hover */
.dropup-content a:hover {background-color: #ddd}
/* Show the
dropup menu on hover */
.dropup:hover .dropup-content {
display: block;
}
/* Change the background color of the dropup button when the
dropup content is shown */
.dropup:hover .dropbtn {
background-color: #2980B9;
}
Hãy tự mình thử »Ví dụ giải thích
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 .dropup
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 lên trên nút thả lên (sử dụng position:absolute
).
Lớp .dropup-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ả lên rộng bằng nút thả lên, 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ộ chọn :hover
đượ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.