Hiệu ứng dropdown trong CSS

Hiệu ứng dropdown cơ bản

Để tạo một hộp xổ xuống (dropdown box) khi người dùng trỏ chuột vào phần tử, bạn có thể tham khảo mã CSS dưới đây:

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-awidth: 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 một vài phần tử để mở nội dung được xổ xuống, ví dụ <span> hoặc phần tử <button>. Sử dụng một phần tử chứa (như <div>) để tạo nội dung xổ xuống và thêm một số yếu tố bạn cần vào bên trong. Bao một phần tử <div> xung quanh các phần tử để định vị nội dung thả xuống một cách chính xác với CSS.

CSS) .dropdown sử dụng position:relative, cần thiết khi muốn đặt nội dung thả xuống ngay bên dưới nút thả xuống (sử dụng position:absolute). .dropdown-content chứa nội dung thả xuống. Nó được ẩn theo mặc định, và sẽ được hiển thị trên di chuột. Lưu ý min-awidth được đặt thành 160px, bạn có thể 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 như nút thả xuống, hãy đặt chiều rộng là 100% (và overflow:auto để bật thanh cuộn trên màn hình nhỏ).

Thay vì sử dụng một đường viền, sử dụng thuộc tínhbox-shadow CSS3 để làm cho trình đơn thả xuống giống như một “tấm thẻ”. Bộ chọn :hover được sử dụng để hiển thị thanh menu xổ xuống khi người dùng rê chuột qua nút thả xuống.

Menu thả xuống

Tạo một menu thả xuống cho phép người dùng tùy chọn trong danh sách. Ví dụ dưới tương tự ví dụ trước, ngoại trừ việc thêm liên kết bên trong hộp thả xuống và sắp xếp chúng để phù hợp với một nút thả xuống theo định dạng:

<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-awidth: 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ếu bạn muốn thanh menu chạy từ phải sang trái thay vì trái sang phải, thêm riight: 0;

.dropdown-content {
    right: 0;
}