W3.CSS ให้บริการทุกชนิดสำหรับแถบนำทาง:
แนวตั้ง:
แนวนอน (แนวตั้งบนหน้าจอขนาดเล็ก):
พื้นฐานนำร่อง
ชั้น W3-Navbar สร้างแถบแนวนอน:
ตัวอย่าง
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> ลองตัวเอง» แถบสีนำร่อง
ตัวอย่าง
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> ลองตัวเอง» บาร์ขอบนำร่อง
ตัวอย่าง
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> ลองตัวเอง» ใช้ / เชื่อมโยงปัจจุบัน
ตัวอย่าง
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> ลองตัวเอง» ลิงค์ Hoverable
เมื่อคุณวางเมาส์เหนือลิงก์ภายในแถบนำทางสีพื้นหลังจะเปลี่ยนเป็นสีเทา
ถ้าคุณต้องการสีพื้นหลังที่แตกต่างกันบนเลื่อนใช้ใด ๆ ของ W3-hover- เรียนสีและถ้าคุณต้องการสีของตัวอักษรที่แตกต่างกันเกี่ยวกับการเลื่อนใช้ใด ๆ ของการเรียน W3-hover ข้อความสี:
ตัวอย่าง
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> ลองตัวเอง» ลิงค์จัดชิดขวา
ตัวอย่าง
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> ลองตัวเอง» ป้ายขนาด
เปลี่ยนขนาดตัวอักษร:
ตัวอย่าง
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> ลองตัวเอง» เปลี่ยนช่องว่างนี้:
ตัวอย่าง
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> ลองตัวเอง» ปรับแต่งความกว้างของรายการที่มีคุณสมบัติความกว้าง CSS (หมายเหตุ: ในหน้าจอขนาดเล็กที่พวกเขาจะเปลี่ยนเป็น 100%) นี้:
ตัวอย่าง
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> ลองตัวเอง» แถบนำทางด้วยไอคอน
ตัวอย่าง
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> ลองตัวเอง» แถบนำทางด้วยแบบเลื่อนลง
เลื่อนเมาส์เหนือลิงก์ "เลื่อนลง":
ตัวอย่าง
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</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>
</li>
</ul> ลองตัวเอง» หมายเหตุ: เมื่อเมนูแบบเลื่อนลงเป็น "เปิด" การเชื่อมโยงแบบเลื่อนลงได้รับสีพื้นหลังสีเทาเพื่อบ่งชี้ว่ามีการใช้งาน เพื่อแทนที่นี้เพิ่มระดับสี W3-hover- ทั้ง "เลื่อนลง" <li> และ <a>:
เคล็ดลับ: หากคุณต้องการเป็นสัญลักษณ์แบบเลื่อนลงถัดจากข้อความแบบเลื่อนลงเพิ่มไอคอนที่เหมาะสม (เช่น ):
ตัวอย่าง
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" 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>
</li> ลองตัวเอง» ใช้ W3-แบบเลื่อนลงคลิกหากคุณต้องการคลิกที่ลิงค์เลื่อนลงแทนโฉบ:
ตัวอย่าง
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
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>
</li> ลองตัวเอง» คงที่ป้าย
เพื่อบังคับให้แถบนำทางที่จะอยู่ที่ด้านบนหรือด้านล่างของหน้าแม้เมื่อผู้ใช้เลื่อนหน้าห่อ <div> รอบ <ul> และเพิ่ม W3 บนหรือระดับ W3 ล่าง:
ยุบป้าย
เมื่อแถบนำทางใช้พื้นที่มากเกินไปในหน้าจอขนาดเล็กและคุณไม่ต้องการที่จะแสดงผลในแนวตั้งโดยค่าเริ่มต้นคุณสามารถใช้อาคารเรียนเพื่อซ่อนและแสดงการเชื่อมโยงเฉพาะในแถบนำทาง
ในตัวอย่างด้านล่างแถบนำทางจะถูกแทนที่ด้วยปุ่ม (☰) ที่มุมขวาบนเมื่อแสดงบนแท็บเล็ตและโทรศัพท์มือถือ เมื่อมีการคลิกปุ่มแถบนำทางจะแสดงในแนวตั้ง:
ตัวอย่าง
ลองตัวเอง»Topnav
ตัวอย่างของแถบนำทางอีกเป็นชั้น W3-topnav มันคล้ายกับ W3-Navbar ยกเว้นว่ามันจะเพิ่มขีดเส้นใต้เมื่อคุณเลื่อนเมาส์ไปที่การเชื่อมโยงแทนสีพื้นหลัง:
ตัวอย่าง
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> ลองตัวเอง» เช่นกับ Font ไอคอนน่ากลัว
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> ลองตัวเอง» Side นำร่อง
ชั้น W3-sidenav สร้างแถบนำทางแนวตั้ง:
ไปที่ บทต่อไป ที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการนำทางด้านข้าง