Danh sách thả xuống W3.CSS
Các lớp thả xuống W3.CSS
W3.CSS cung cấp các lớp thả xuống sau:
| Lớp học | Định nghĩa |
|---|---|
| w3-thả xuống-di chuột | Phần tử thả xuống có thể di chuột |
| nội dung thả xuống w3 | Phần thả xuống sẽ được hiển thị |
| w3-thả xuống-nhấp chuột | Phần tử thả xuống có thể nhấp vào |
Phần tử thả xuống
Lớp w3-dropdown-hover xác định phần tử thả xuống có thể di chuột.
Lớp nội dung thả xuống w3 xác định nội dung thả xuống sẽ được hiển thị.
Ví dụ
<div class="w3-dropdown-hover">
<button class="w3-button">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Cả phần tử có thể di chuột và phần tử nội dung thả xuống đều có thể là bất kỳ phần tử HTML nào.
Trong ví dụ trên, phần tử di chuột là <button> và nội dung thả xuống là <div>.
Trong ví dụ tiếp theo, phần tử di chuột là <p> và nội dung thả xuống là <span>:
Ví dụ
<p class="w3-dropdown-hover">Hover over me!
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>Menu thả xuống
Lớp w3-dropdown-hover hoàn hảo để tạo các thanh điều hướng với các menu thả xuống:
Ví dụ
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<div class="w3-dropdown-hover">
<button
class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div> Hãy tự mình thử »Lưu ý: Bạn sẽ tìm hiểu thêm về Thanh điều hướng sau trong hướng dẫn này.
Danh sách thả xuống có thể nhấp
Lớp w3-dropdown-click tạo một phần tử thả xuống có thể nhấp vào.
Với lớp này, danh sách thả xuống được mở bằng JavaScript:
Ví dụ
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
<div id="Demo" class="w3-dropdown-content
w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>Danh sách thả xuống hình ảnh
Di chuyển chuột lên hình ảnh:
Ví dụ
<div class="w3-dropdown-hover">
<img src="img_snowtops.jpg" alt="Norway" style="width:20%">
<div
class="w3-dropdown-content" style="width:300px">
<img src="img_snowtops.jpg"
alt="Norway" style="width:100%">
</div>
</div>Thả thẻ xuống
Di chuyển chuột qua một trong các thành phố dưới đây:
London là thủ đô của nước Anh.
Đây là thành phố đông dân nhất ở Vương quốc Anh, với khu vực đô thị hơn 9 triệu dân.
Tokyo là thủ đô của Nhật Bản.
13 triệu dân.
Ví dụ
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content
w3-card-4" style="width:250px">
<img src="img_london.jpg"
alt="London" style="width:100%">
<div
class="w3-container">
<p>London is the
capital city of England.</p>
<p>It is the
most populous city in the UK.</p>
</div>
</div>
</div>
Thả xuống hoạt hình
Sử dụng bất kỳ lớp w3-animate- nào để làm mờ, thu phóng hoặc trượt trong nội dung thả xuống:
Ví dụ
<div class="w3-dropdown-click">
<button onclick="myFunction()"
class="w3-button">Click Me</button>
<div id="Demo"
class="w3-dropdown-content w3-bar-block w3-animate-zoom">
<a href="#"
class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Danh sách thả xuống căn phải
Sử dụng lớp w3-right để thả nổi danh sách thả xuống sang bên phải. Sử dụng CSS để định vị nội dung thả xuống ( right:0 sẽ làm cho menu thả xuống đi từ phải sang trái thay vì từ trái sang phải):
Ví dụ
<div class="w3-dropdown-hover w3-right">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content
w3-bar-block w3-border" style="right:0">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
