Basic Dropdown
Tạo một menu dropdown xuất hiện khi người dùng di chuyển chuột qua element.
<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>Dropdown menu</span> <div class="dropdown-content"> <p>Hello World!</p> </div> </div>
Example Explained
HTML) Sử dụng bất kỳ element nào để mở nội dung dropdown, ví dụ: element <pan> hoặc <buttton>.
Sử dụng một element container (như <div>) để tạo nội dung thả xuống và thêm bất cứ thứ gì bạn muốn bên trong nó.
Bao bọc element <div> xung quanh để định vị chính xác nội dung thả xuống với CSS.
CSS) class .dropdown sử 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).
Class .dropdown-content giữ nội dung 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 border, chúng tôi đã sử dụng thuộc tính CSS box-shadow để làm cho dropdown menu trông giống như một "thẻ".
:hover được sử dụng để hiển thị dropdown menu khi người dùng di chuyển chuột qua nút thả xuống.
Dropdown Menu
Tạo dropdown menu 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 link bên trong dropdown menu và tạo kiểu cho chúng vừa với nút thả xuống:
<style> /* Style Dropdown Button */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* container <div> - cần position để xác định dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (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; } /* Links bên trong dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* đổi màu khi link được hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* hiện menu khi dropdown được hover */ .dropdown:hover .dropdown-content { display: block; } /* thay đổi màu nền của nút thả xuống khi nội dung thả xuống được hiển thị */ .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>
Right-aligned Dropdown Content
Nếu bạn muốn dropdown menu đi từ phải sang trái, thay vì từ trái sang phải, hãy thêm right: 0;
.dropdown-content { right: 0; }