Thanh bên W3.CSS
Thanh điều hướng dọc W3.CSS
Với điều hướng bên, bạn có một số tùy chọn:
- Luôn hiển thị khung điều hướng ở bên trái nội dung trang
- Sử dụng điều hướng bên đáp ứng "hoàn toàn tự động" có thể thu gọn
- Mở ngăn điều hướng ở phần bên trái của nội dung trang
- Mở ngăn điều hướng trên tất cả nội dung trang
- Trượt nội dung trang sang phải khi mở ngăn điều hướng
- Hiển thị khung điều hướng ở bên phải thay vì bên trái
Luôn hiển thị thanh bên
Ví dụ
<div class="w3-sidebar w3-bar-block" style="width:25%">
<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 style="margin-left:25%">
... page content ...
</div> Hãy tự mình thử » Mở điều hướng thanh bên qua một phần nội dung
Ví dụ
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
Hãy tự mình thử »Mở thanh điều hướng bên trên nội dung
Ví dụ
function w3_open() {
document.getElementById("mySidebar").style.width
= "100%";
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
Hãy tự mình thử »Điều hướng bên đáp ứng có thể thu gọn
Ví dụ
<div class="w3-sidebar
w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar">
<button class="w3-bar-item
w3-button w3-hide-large"
onclick="w3_close()">Close ×</button>
<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 class="w3-main" style="margin-left:200px">
<div class="w3-teal">
<button class="w3-button w3-teal
w3-xlarge" onclick="w3_open()">☰</button>
<div
class="w3-container">
<h1>My Page</h1>
</div>
</div>
</div>
<script>
function w3_open()
{
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script> Hãy tự mình thử »Trượt nội dung trang sang bên phải
Ví dụ
function w3_open() {
document.getElementById("main").style.marginLeft
= "25%";
document.getElementById("mySidebar").style.width
= "25%";
document.getElementById("mySidebar").style.display
= "block";
document.getElementById("openNav").style.display
= 'none';
}
function w3_close() {
document.getElementById("main").style.marginLeft
= "0%";
document.getElementById("mySidebar").style.display
= "none";
document.getElementById("openNav").style.display
= "inline-block";
}Hãy tự mình thử »Điều hướng bên phải
Ví dụ
<div class="w3-sidebar
w3-bar-block" style="width:25%; right:0 ">
<h5 class="w3-bar-item">Menu</h5>
<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 style="margin-right:25%">
... page content ...
</div>Hãy tự mình thử »Điều hướng có thể thu gọn ở bên phải
Ví dụ
<div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0"
id="mySidebar">
<button class="w3-bar-item w3-button w3-hide-large"
onclick="w3_close()">Close
×</button>
<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 class="w3-main" style="margin-right:200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge
w3-right w3-hide-large" onclick="w3_open()">☰</button>
<div
class="w3-container">
<h2>My Page</h2>
</div>
</div>
</div>
<script>
function w3_open()
{
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script> Hãy tự mình thử »Điều hướng bên trái và bên phải
Ví dụ
Hãy tự mình thử »Tạo kiểu cho điều hướng bên
Thêm lớp màu w3- vào thanh bên w3 để thay đổi màu nền. Nếu bạn muốn một liên kết đang hoạt động/hiện tại, để cho người dùng biết họ đang ở trang nào, hãy thêm lớp màu w3- vào một trong các liên kết:
Điều hướng bên có viền
Sử dụng lớp w3-border để thêm đường viền xung quanh điều hướng bên:
Thêm lớp w3-border-bottom vào các liên kết để tạo bộ chia liên kết:
Ví dụ
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-border-bottom">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div> Hãy tự mình thử »Sử dụng lớp w3-card để hiển thị điều hướng bên dưới dạng thẻ:
Liên kết có thể di chuột
Khi bạn di chuột qua các liên kết bên trong khối thanh, 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-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-black">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-green">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-blue">Link 3</a>
</div>Hãy tự mình thử »Bạn có thể tắt hiệu ứng di chuột mặc định bằng lớp w3-hover-none . Điều này thường được sử dụng khi bạn chỉ muốn làm nổi bật màu văn bản (chứ không phải màu nền) khi di chuột:
Ví dụ
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">Link
1</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Link
2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Link
3</a>
</div> Hãy tự mình thử »Kích thước điều hướng bên
Kích thước phông chữ tăng (w3-large, v.v.):
Phần đệm tăng lên (w3-padding, v.v.):
Ví dụ
<div class="w3-sidebar w3-bar-block w3-large">
<a href="#" class="w3-bar-item
w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div> Hãy tự mình thử »Điều hướng bên với các biểu tượng
Ví dụ
<div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
<a href="#"
class="w3-bar-item w3-button"><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>
</div>Hãy tự mình thử »Thanh bên có thả xuống
Ví dụ
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<div
class="w3-dropdown-hover">
<button
class="w3-button">Dropdown
<i class="fa fa-caret-down"></i></button>
<div
class="w3-dropdown-content w3-bar-block">
<a href="#"
class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#"
class="w3-bar-item w3-button">Link
3</a>
</div> Hãy tự mình thử »Mẹo: Khi menu thả xuống ở trạng thái "mở", liên kết thả xuống sẽ có màu nền xám để biểu thị rằng nó đang hoạt động. Để ghi đè điều này, hãy thêm lớp w3-hover-color vào cả "thả xuống" <div> và <a>.
Thanh bên với Accordion
Ví dụ
<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
<div
id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myDropFunc()">Dropdown</button>
<div
id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link
3</a>
</div>Thanh bên 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 điều hướng bên:
Lớp phủ thanh bên
Lớp w3-overlay có thể được sử dụng để tạo hiệu ứng lớp phủ khi mở thanh bên. Lớp lớp phủ w3 thêm nền đen với độ mờ 50% cho "nội dung trang" - hiệu ứng này sẽ "làm nổi bật" điều hướng bên cạnh.
Ví dụ
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
<button
class="w3-bar-item w3-button"
onclick="w3_close()">Close</button>
<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>
<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer"
id="myOverlay"></div>
<!-- Page content -->
<button class="w3-button w3-xxlarge"
onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>Sidebar Overlay</h1>
<p>Click on the "hamburger" icon to slide
in the side navigation.</p>
</div>
<!-- JS to
open and close sidebar with overlay effect -->
<script>
function
w3_open() {
document.getElementById("mySidebar").style.display
= "block";
document.getElementById("myOverlay").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script> Hãy tự mình thử »Nội dung thanh bên
Thêm bất cứ điều gì bạn thích bên trong điều hướng bên:
Ví dụ
<div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%">
<div
class="w3-container w3-dark-grey">
<h4>Menu</h4>
</div>
<img src="img_snowtops.jpg">
<a href="#"
class="w3-bar-item w3-button w3-red">Home</a>
<a href="#" class="w3-bar-item w3-button">Projects
<span
class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#" class="w3-bar-item w3-button">About</a>
<a href="#"
class="w3-bar-item w3-button">Contact</a>
<div class="w3-panel w3-blue-grey
w3-display-container">
<span class="w3-button w3-display-topright">X</span>
<p>Lorem
ipsum box...</p>
</div>
</div> Hãy tự mình thử »