แนวตั้งป้าย
ด้วยลูกศรด้านคุณมีหลายตัวเลือก:
- มักจะแสดงบานหน้าต่างนำทางด้านซ้ายของเนื้อหาหน้า
- ใช้พับลูกศรด้าน "โดยอัตโนมัติอย่างเต็มที่" ตอบสนอง
- เปิดบานหน้าต่างนำทางซ่อนตัวอยู่ส่วนด้านซ้ายของเนื้อหาของหน้าเว็บ
- เปิดบานหน้าต่างนำทางซ่อนเนื้อหาทั้งหมดของหน้า
- เปลี่ยนเนื้อหาของหน้าไปทางขวาเมื่อเปิดบานหน้าต่างนำทาง
ตัวอย่าง: เสมอแสดงการนำทางด้านข้าง
<nav class="w3-sidenav w3-white" style="width:25%">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
<div style="margin-left:25%">
... page content ...
</div> ลองตัวเอง» พับ Sidenav ตอบสนอง
<nav class="w3-sidenav w3-collapse w3-white" style="width:200px">
<a href="#" onclick="w3_close()" class="w3-closenav w3-hide-large">Close
×</a>
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</nav>
<div class="w3-main" style="margin-left:200px">
<span class="w3-opennav w3-hide-large" onclick="w3_open()">☰</span>
... page content ...
</div>
<script>
function w3_open()
{
document.getElementsByClassName(" w3-sidenav ")[ 0 ].style.display
= " block ";
}
function w3_close() {
document.getElementsByClassName(" w3-sidenav ")[ 0 ].style.display = " none ";
}
</script> ลองตัวเอง» เปิดบานหน้าต่างนำทางซ่อนส่วนหนึ่งของเนื้อหาที่
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
ลองตัวเอง» เปิดบานหน้าต่างนำทางซ่อนเนื้อหาทั้งหมด
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.width
= "100%";
document.getElementsByClassName("w3-sidenav")[0].style.display
= "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
ลองตัวเอง» เปลี่ยนเนื้อหาไปขวา
function w3_open() {
document.getElementById("main").style.marginLeft
= "25%";
document.getElementsByClassName("w3-sidenav")[0].style.width
= "25%";
document.getElementsByClassName("w3-sidenav")[0].style.display
= "block";
document.getElementsByClassName("w3-opennav")[0].style.display
= 'none';
}
function w3_close() {
document.getElementById("main").style.marginLeft
= "0%";
document.getElementsByClassName("w3-sidenav")[0].style.display
= "none";
document.getElementsByClassName("w3-opennav")[0].style.display
= "inline-block";
} ลองตัวเอง» จัดแต่งทรงผมด้านข้างนำร่อง
เพิ่มระดับสี w3- ไป W3-sidenav การเปลี่ยนสีพื้นหลัง ถ้าคุณต้องการใช้งาน / การเชื่อมโยงในปัจจุบันเพื่อให้ผู้ใช้ทราบว่าหน้าเขา / เธออยู่บนเพิ่มระดับสี w3- ให้เป็นหนึ่งในการเชื่อมโยงเช่นกัน:
ตัวอย่าง
<nav class="w3-sidenav w3-light-grey">
<a class="w3-green" href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
</nav> ลองตัวเอง» ขอบด้านข้างนำร่อง
ใช้คลาส W3 พรมแดนเพื่อเพิ่มขอบรอบ sidenav นี้:
ตัวอย่าง
<nav class="w3-sidenav w3-border">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
</nav> ลองตัวเอง» เพิ่มระดับ W3-ขอบล่างเพื่อเชื่อมโยงไปยังวงเวียนสร้างการเชื่อมโยง:
ตัวอย่าง
<nav class="w3-sidenav w3-border">
<a class="w3-border-bottom" href="#">Link 1</a>
<a
class="w3-border-bottom" href="#">Link 2</a>
<a
href="#">Link 3</a>
</nav> ลองตัวเอง» ใช้คลาส W3 บัตรเพื่อแสดง sidenav เป็นบัตร:
ตัวอย่าง
<nav class="w3-sidenav w3-card-8">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
</nav> ลองตัวเอง» ลิงค์ Hoverable
เมื่อคุณวางเมาส์เหนือลิงก์ภายใน sidenav สีพื้นหลังจะเปลี่ยนเป็นสีเทา
ถ้าคุณต้องการสีพื้นหลังที่แตกต่างกันในโฉบใช้ใด ๆ ของการเรียน W3-hover สี:
ตัวอย่าง
<nav class="w3-sidenav">
<a class="w3-hover-black" href="#">Link 1</a>
<a
class="w3-hover-green" href="#">Link 2</a>
<a
class="w3-hover-blue" href="#">Link 3</a>
<a class="w3-hover-red" href="#">Link
4</a>
</nav> ลองตัวเอง» คุณสามารถปิดผลโฉบเริ่มต้นกับการเรียน W3-hover-ไม่มีที่ นี้มักจะใช้เมื่อคุณเพียงต้องการที่จะเน้นสีข้อความ (และไม่สีพื้นหลัง) บนโฉบ:
ตัวอย่าง
<nav class="w3-sidenav">
<a class="w3-hover-none w3-hover-text-grey" href="#">Link 1</a>
<a
class="w3-hover-none w3-hover-text-green" href="#">Link 2</a>
<a
class="w3-hover-none w3-hover-text-teal" href="#">Link 3</a>
<a class="w3-hover-none w3-hover-text-orange" href="#">Link
4</a>
</nav> ลองตัวเอง» ด้านข้างขนาดนำร่อง
เพิ่มขึ้น font-size (ETC-W3 ขนาดใหญ่):
เพิ่มขึ้น padding (W3-padding ฯลฯ ):
ตัวอย่าง
<nav class="w3-sidenav w3-large">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav> ลองตัวเอง» ลูกศรด้านที่มีไอคอน
ตัวอย่าง
<nav class="w3-sidenav w3-black" style="width:70px">
<a href="#"><i
class="fa fa-home w3-xxlarge"></i></a>
<a href="#"><i class="fa
fa-search w3-xxlarge"></i></a>
<a href="#"><i class="fa fa-envelope
w3-xxlarge"></i></a>
<a href="#"><i class="fa fa-globe
w3-xxlarge"></i></a>
</nav> ลองตัวเอง» Side นำทางพร้อมเลื่อนลง
ตัวอย่าง
<nav class="w3-sidenav w3-light-grey">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<div
class="w3-dropdown-hover">
<a href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link
3</a>
</nav> ลองตัวเอง» เคล็ดลับ: เมื่อเมนูแบบเลื่อนลงเป็น "เปิด" การเชื่อมโยงแบบเลื่อนลงได้รับสีพื้นหลังสีเทาเพื่อบ่งชี้ว่ามีการใช้งาน เพื่อแทนที่นี้เพิ่มระดับ W3-hover สีทั้ง "เลื่อนลง" <li> และ <a>
ลูกศรด้านกับหีบเพลง
ตัวอย่าง
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>Sidenav เคลื่อนไหว
ใช้ใด ๆ ของชั้นเรียน W3-animate- จะจางหายไป, ซูมหรือเลื่อนลูกศรด้านใน:
Sidenav ซ้อนทับ
ชั้น W3 ซ้อนทับสามารถนำมาใช้เพื่อสร้างผลซ้อนทับเมื่อเปิด sidenav ชั้น W3 ซ้อนทับเพิ่มพื้นหลังสีดำที่มีความทึบ 50% ที่ "เนื้อหาของหน้า" - ผลกระทบนี้จะ "ไฮไลท์" การนำทางด้านข้าง
ตัวอย่าง
<!-- Sidenav -->
<nav class="w3-sidenav w3-white w3-animate-left"
style="display:none;z-index:4">
<a href="javascript:void(0)"
onclick="w3_close()" class="w3-closenav">Close</a>
<a href="#">Link
1</a>
<a href="#">Link 2</a>
</nav>
<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer"></div>
<!-- Page content -->
<div class="w3-container">
<span
class="w3-opennav" onclick="w3_open()">☰</span>
</div>
<!-- JS to
open and close sidenav with overlay effect -->
<script>
function
w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display
= "block";
document.getElementsByClassName("w3-overlay")[0].style.display
= "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
document.getElementsByClassName("w3-overlay")[0].style.display = "none";
}
</script> ลองตัวเอง» เนื้อหา Sidenav
เพิ่มสิ่งที่คุณต้องการภายในการนำทางด้านข้าง:
ตัวอย่าง
<nav class="w3-sidenav w3-light-grey" style="width:50%">
<div
class="w3-container w3-dark-grey">
<h4>Menu</h4>
</div>
<img src="img_fjords.jpg">
<a class="w3-red" href="#">Home</a>
<a href="#">Projects
<span
class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#">About</a>
<a href="#">Contact</a>
<div class="w3-container">
<div class="w3-border w3-round w3-padding w3-blue-grey">
<span class="w3-closebtn">x</span>
<p>Lorem
ipsum box...</p>
</div>
</div>
</nav> ลองตัวเอง»