W3.CSS thả xuống
Các lớp thả xuống của W3.CSS
W3.CSS cung cấp các lớp thả xuống sau:
| Lớp học | Xác định |
|---|---|
| w3-dropdown-diver | Một phần tử thả xuống có thể lưu trữ |
| w3-dropdown-content | Phần thả xuống sẽ được hiển thị |
| w3-thả xuống-nhấp | Một phần tử thả xuống có thể nhấp |
Yếu tố thả xuống
Lớp w3-dropdown-hover định nghĩa một phần tử thả xuống có thể di chuyển được.
Lớp w3-dropdown-content xác định nội dung thả xuống sẽ được hiển thị.
Thí 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ể lưu trữ 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à một <button> và nội dung thả xuống là một <div>.
Trong ví dụ tiếp theo, phần tử di chuột là một <p> và nội dung thả xuống là một <span>:
Thí 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 trình đơn thả xuống:
Thí 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>
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.
Trình đơn thả xuống có thể nhấp
Lớp w3-dropdown-click tạo ra một phần tử thả xuống có thể nhấp được.
Với lớp này, trình đơn thả xuống được mở bằng JavaScript:
Thí 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>
Trình đơn thả xuống Hình ảnh
Di chuyển chuột qua hình ảnh:
Thí 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ố bên dưới:
Luân Đôn là thành phố thủ đô của nước Anh.
Đây là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Tokyo is the capital city of Japan.
13 million inhabitants.
Thí 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>
Hoạt ảnh thả xuống
Sử dụng bất kỳ lớp w3 -animate- nào để làm mờ dần, thu phóng hoặc trượt trong nội dung thả xuống:
Thí 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>
Menu thả xuống căn phải
Sử dụng lớp w3-right để thả menu thả xuống 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):
Thí 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>