W3.CSS

W3.CSS หน้าแรก W3.CSS แนะนำ W3.CSS สี คอนเทนเนอร์ W3.CSS แผง W3.CSS เส้นขอบ W3.CSS การ์ด W3.CSS ค่าเริ่มต้นของ W3.CSS แบบอักษร W3.CSS W3.CSS Google W3.CSS Text W3.CSS รอบ W3.CSS แพ็ดดิ้ง W3.CSS Margins จอแสดงผล W3.CSS ปุ่ม W3.CSS W3.CSS หมายเหตุ คำคม W3.CSS การแจ้งเตือน W3.CSS ตาราง W3.CSS รายการ W3.CSS W3.CSS รูปภาพ อินพุต W3.CSS ป้าย W3.CSS แท็ก W3.CSS ไอคอน W3.CSS W3.CSS ตอบสนอง เค้าโครง W3.CSS ภาพเคลื่อนไหว W3.CSS เอฟเฟกต์ W3.CSS W3.CSS บาร์ ดรอปดาวน์ W3.CSS หีบเพลง W3.CSS W3.CSS การนำทาง แถบด้านข้าง W3.CSS แท็บ W3.CSS การแบ่งหน้า W3.CSS แถบความคืบหน้า W3.CSS สไลด์โชว์ W3.CSS W3.CSS โมดอล เคล็ดลับเครื่องมือ W3.CSS W3.CSS กริด รหัส W3.CSS ตัวกรอง W3.CSS W3.CSS Trends กรณี W3.CSS W3.CSS วัสดุ การตรวจสอบ W3.CSS เวอร์ชัน W3.CSS W3.CSS มือถือ

W3.CSS สี

คลาสสี W3.CSS W3.CSS วัสดุสี W3.CSS Color Flat UI W3.CSS Color Metro UI W3.CSS สี Win8 W3.CSS Color iOS W3.CSS แฟชั่นสี ไลบรารีสี W3.CSS W3.CSS แบบแผนสี ธีมสี W3.CSS ตัวสร้างสี W3.CSS

การสร้างเว็บ

แนะนำเว็บ เว็บ HTML เว็บ CSS JavaScript ของเว็บ เค้าโครงเว็บ เว็บแบนด์ เว็บจัดเลี้ยง เว็บร้านอาหาร สถาปนิกเว็บ

ตัวอย่าง

ตัวอย่าง W3.CSS W3.CSS สาธิต เทมเพลต W3.CSS

อ้างอิง

การอ้างอิง W3.CSS ดาวน์โหลด W3.CSS

W3.CSS แถบนำทาง



คลาสแถบการนำทาง W3.CSS

W3.CSS มีคลาสต่อไปนี้สำหรับแถบนำทาง:

ระดับ กำหนด
w3-bar คอนเทนเนอร์แนวนอนสำหรับองค์ประกอบ HTML
w3-bar-บล็อก คอนเทนเนอร์แนวตั้งสำหรับองค์ประกอบ HTML
w3-bar-item องค์ประกอบของแถบคอนเทนเนอร์
w3-แถบด้านข้าง แถบด้านข้างแนวตั้งสำหรับองค์ประกอบ HTML
w3-mobile ทำให้องค์ประกอบแถบใด ๆ ตอบสนองก่อนมือถือ
w3-dropdown-โฮเวอร์ องค์ประกอบดรอปดาวน์ที่เลื่อนได้
w3-ดรอปดาวน์-คลิก องค์ประกอบดรอปดาวน์ที่คลิกได้ (แทนโฮเวอร์)

การนำทางขั้นพื้นฐาน

คลาสw3-barเป็นคอนเทนเนอร์สำหรับแสดงองค์ประกอบ HTML ในแนวนอน

คลาสw3-bar-itemกำหนดองค์ประกอบคอนเทนเนอร์

เป็นเครื่องมือที่สมบูรณ์แบบสำหรับการสร้างแถบนำทาง:

ตัวอย่าง

<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>



การนำทางที่ตอบสนอง

คลาสw3-mobileทำให้องค์ประกอบแถบตอบสนอง (แนวนอนบนหน้าจอขนาดใหญ่และแนวตั้งในขนาดเล็ก)

หน้าจอขนาดกลางและขนาดใหญ่:

หน้าจอขนาดเล็ก:

ตัวอย่าง

<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>


แถบนำทางสี

ใช้ คลาส w3-colorเพื่อเพิ่มสีให้กับแถบนำทาง:



ตัวอย่าง

<div class="w3-bar w3-light-grey">
<div class="w3-bar w3-green">
<div class="w3-bar w3-blue">

แถบนำทางที่มีขอบ

ใช้ คลาส w3-borderหรือw3-cardเพื่อเพิ่มเส้นขอบรอบๆ แถบนำทาง หรือเพื่อแสดงเป็นการ์ด:



ตัวอย่าง

<div class="w3-bar w3-border w3-light-grey">
<div class="w3-bar w3-border w3-card-4">

ลิงค์ที่ใช้งาน/ปัจจุบัน

เพิ่ม คลาส w3-colorให้กับลิงก์เพื่อเน้น:


ตัวอย่าง

<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>


ลิงก์ที่เลื่อนได้

เมื่อคุณวางเมาส์เหนือปุ่ม สีพื้นหลังจะเปลี่ยนเป็นสีเทา

หากคุณต้องการสีพื้นหลังที่แตกต่างกันบนโฮเวอร์ ให้ใช้ คลาส สี w3-hover- ใดๆ :

ตัวอย่าง

<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>

หากคุณต้องการเปลี่ยนสีข้อความแทน ให้ปิดเอฟเฟกต์โฮเวอร์เริ่มต้นด้วย คลาส w3-hover-noneและเพิ่มคลาสw3 -hover-text

ตัวอย่าง

<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>

ใช้เวลาในการเล่นกับเอฟเฟกต์โฮเวอร์ที่แตกต่างกัน:




ตัวอย่าง

<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>


ลิงค์ชิดขวา

ใช้ คลาส w3-rightในรายการเพื่อจัดแนวลิงก์เฉพาะให้ชิดขวา:

ตัวอย่าง

<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>


ขนาดแถบนำทาง

ใช้ คลาส ขนาด w3เพื่อเปลี่ยนขนาดฟอนต์ของลิงก์ภายในแถบนำทาง:


ตัวอย่าง

<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">

ใช้ คลาส w3-paddingเพื่อเปลี่ยน padding ของแต่ละลิงก์ภายใน navbar:


ตัวอย่าง

<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>

หมายเหตุ:คุณยังสามารถเพิ่มการเติมลงในแถบนำทาง แทนที่จะเพิ่มแต่ละปุ่ม อย่างไรก็ตาม หากคุณทำเช่นนี้ โปรดทราบว่าลิงก์จะไม่ได้รับการเติมเต็มเมื่อวางเมาส์เหนือ:

ตัวอย่าง

<div class="w3-bar w3-green w3-padding-16"></div>

กำหนดความกว้างของลิงก์ด้วยคุณสมบัติความกว้าง CSS

( หมายเหตุ : ใช้w3-mobileเพื่อแปลงลิงก์เป็นความกว้าง 100% บนหน้าจอขนาดเล็ก):


ตัวอย่าง

<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>

แถบนำทางพร้อมไอคอน

ตัวอย่าง

<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>

คลาส "fa fa" ในตัวอย่างด้านบนจะแสดงไอคอน "Font Awesome"

เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการแสดงไอคอนในบทไอคอนW3.CSS


ข้อความแถบนำทาง

หากคุณต้องการข้อความแทนปุ่มภายในแถบนำทาง ให้ใช้ คลาส w3-bar-itemเพื่อรับช่องว่างภายในเดียวกันกับปุ่ม

ตัวอย่าง

<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>

แถบนำทางพร้อมอินพุตและปุ่ม

ตัวอย่าง

<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>

แถบนำทางพร้อมดรอปดาวน์

เลื่อนเมาส์ไปที่ลิงก์ "ดรอปดาวน์":

ตัวอย่าง

<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>

ดร็อปดาวน์ที่คลิกได้

ใช้w3-dropdown-clickหากคุณต้องการคลิกลิงก์ดรอปดาวน์แทนการโฮเวอร์:

ตัวอย่าง

<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>

เมนูแบบเลื่อนลงแนวนอน

ลบคลาส w3-bar-block ออกจากคอนเทนเนอร์ดรอปดาวน์ หากคุณต้องการให้ลิงก์ดรอปดาวน์แสดงในแนวนอนแทนที่จะเป็นแนวตั้ง:

ตัวอย่าง

<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>

Navbar ที่ตอบสนองพร้อมดรอปดาวน์ที่ตอบสนอง

ใช้คลาส w3-mobile กับลิงก์ทั้งหมดรวมถึงคอนเทนเนอร์ดรอปดาวน์เพื่อสร้างแถบนำทางที่ตอบสนองพร้อมลิงก์ดรอปดาวน์ที่ตอบสนอง

ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูเอฟเฟกต์:

ตัวอย่าง

 <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>

Fixed Navigation Bar

To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:

Fixed Top

<div class="w3-top">
  <div class="w3-bar">
    ...
    ...
  </div>
</div>

Fixed Bottom

<div class="w3-bottom">
  <div class="w3-bar">
    ...
    ...
  </div>
</div>

Vertical Navigation Bar

The w3-bar-block class is a container for displaying HTML elements vertically.

Example

<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>

Collapsing the Navigation Bar

When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.

In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:

Example


Side Navigation

The w3-sidebar class creates a side navigation:

Go to the next chapter to learn more about the side navigation.