Thanh điều hướng W3.CSS
Thẳng đứng:
Nằm ngang:
Các lớp thanh điều hướng W3.CSS
W3.CSS cung cấp các lớp sau cho thanh điều hướng:
| Lớp học | Định nghĩa |
|---|---|
| thanh w3 | Vùng chứa ngang cho các phần tử HTML |
| khối w3-bar | Vùng chứa dọc cho các phần tử HTML |
| w3-bar-item | Các phần tử thanh container |
| thanh bên w3 | Thanh bên dọc cho các phần tử HTML |
| w3-mobile | Làm cho bất kỳ phần tử thanh nào phản hồi đầu tiên trên thiết bị di động |
| w3-thả xuống-di chuột | Phần tử thả xuống có thể di chuột |
| w3-thả xuống-nhấp chuột | Phần tử thả xuống có thể nhấp vào (thay vì di chuột) |
Điều hướng cơ bản
Lớp w3-bar là một thùng chứa để hiển thị các phần tử HTML theo chiều ngang.
Lớp w3-bar-item xác định các thành phần chứa.
Nó là một công cụ hoàn hảo để tạo thanh điều hướng:
Ví dụ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<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>
Điều hướng đáp ứng
Lớp w3-mobile làm cho mọi phần tử thanh phản hồi nhanh (ngang trên màn hình lớn và dọc trên màn hình nhỏ).
Màn hình vừa và lớn:
Màn hình nhỏ:
Ví dụ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
Thanh điều hướng màu
Sử dụng lớp w3-color để thêm màu vào thanh điều hướng:
Ví dụ
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue"> Hãy tự mình thử »Thanh điều hướng có viền
Sử dụng lớp w3-border hoặc w3-card để thêm đường viền xung quanh thanh điều hướng hoặc để hiển thị nó dưới dạng thẻ:
Ví dụ
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">Hãy tự mình thử »Liên kết đang hoạt động/hiện tại
Thêm lớp w3-color vào một liên kết để đánh dấu nó:
Ví dụ
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<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>
Liên kết có thể di chuột
Khi bạn di chuột qua nút, màu nền sẽ chuyển sang màu xám.
Nếu bạn muốn có màu nền khác khi di chuột, hãy sử dụng bất kỳ lớp w3-hover- color nào:
Ví dụ
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
Thay vào đó, nếu bạn muốn thay đổi màu văn bản, hãy tắt hiệu ứng di chuột mặc định với lớp w3-hover-none và thêm lớp w3-hover-text .
Ví dụ
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div> Dành chút thời gian để thử nghiệm với các hiệu ứng di chuột khác nhau:
Ví dụ
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div> Liên kết được căn phải
Sử dụng lớp w3-right trên một mục danh sách để căn phải một liên kết cụ thể:
Ví dụ
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<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 w3-green w3-right">Link 3</a>
</div>
Kích thước thanh điều hướng
Sử dụng lớp kích thước w3 để thay đổi kích thước phông chữ của các liên kết bên trong thanh điều hướng:
Ví dụ
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Sử dụng lớp đệm w3 để thay đổi phần đệm của từng liên kết bên trong thanh điều hướng:
Ví dụ
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
Lưu ý: Bạn cũng có thể thêm khoảng đệm vào thanh điều hướng, thay vì thêm từng nút. Tuy nhiên, nếu bạn thực hiện việc này, hãy lưu ý rằng các liên kết không có phần đệm đầy đủ khi di chuột:
Tùy chỉnh độ rộng của liên kết với thuộc tính CSS width
( Lưu ý : Sử dụng w3-mobile để chuyển đổi các liên kết thành chiều rộng 100% trên màn hình nhỏ):
Ví dụ
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div> Hãy tự mình thử »Thanh điều hướng có biểu tượng
Ví dụ
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div> Hãy tự mình thử »Các lớp "fa fa" trong ví dụ trên hiển thị biểu tượng "Font Awesome".
Tìm hiểu thêm về cách hiển thị biểu tượng trong chương Biểu tượng W3.CSS .
Văn bản thanh điều hướng
Nếu bạn muốn văn bản thay vì các nút bên trong thanh điều hướng, hãy sử dụng lớp w3-bar-item để có phần đệm giống như các nút.
Ví dụ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<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>
<span
class="w3-bar-item">Text</span>
</div> Hãy tự mình thử »Thanh điều hướng với đầu vào và nút
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>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div> Hãy tự mình thử »Thanh điều hướng có thả xuống
Di chuyển chuột qua liên kết "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ử »Thả xuống có thể nhấp
Sử dụng w3-dropdown-click nếu bạn muốn nhấp vào liên kết thả xuống thay vì di chuột:
Ví dụ
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
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> Hãy tự mình thử »Menu thả xuống ngang
Xóa lớp w3-bar-block khỏi vùng chứa thả xuống nếu bạn muốn các liên kết thả xuống hiển thị theo chiều ngang thay vì theo chiều dọc:
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-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ử »Thanh điều hướng đáp ứng với thả xuống đáp ứng
Sử dụng lớp w3-mobile trên tất cả các liên kết bao gồm vùng chứa thả xuống để tạo thanh điều hướng phản hồi với các liên kết thả xuống phản hồi.
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng:
Ví dụ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div> Hãy tự mình thử »Thanh điều hướng cố định
Để buộc thanh điều hướng ở đầu hoặc cuối trang, ngay cả khi người dùng cuộn trang, hãy bọc phần tử <div> xung quanh thanh và thêm lớp w3-top hoặc w3-bottom :
Thanh điều hướng dọc
Lớp w3-bar-block là một thùng chứa để hiển thị các phần tử HTML theo chiều dọc.
Ví dụ
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<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> Hãy tự mình thử »Thu gọn thanh điều hướng
Khi thanh điều hướng chiếm quá nhiều không gian trên màn hình nhỏ và bạn không muốn hiển thị nó theo chiều dọc theo mặc định, bạn có thể sử dụng ẩn và hiển thị các lớp trên các liên kết cụ thể trong thanh điều hướng.
Trong ví dụ bên dưới, thanh điều hướng được thay thế bằng nút (☰) ở góc trên cùng bên phải khi hiển thị trên máy tính bảng và thiết bị di động. Khi nhấp vào nút, các liên kết trong thanh điều hướng sẽ xếp chồng lên nhau theo chiều dọc:
Ví dụ
Hãy tự mình thử »Điều hướng bên
Lớp w3-sidebar tạo điều hướng bên:
Hãy chuyển sang chương tiếp theo để tìm hiểu thêm về điều hướng bên.
