แนวนำนอก CSS

Horizontal navigation bar

มีสองวิธีที่สร้างแถวนำทางระดับต่ำ: ใช้InlineหรือFloatingList item.

Inline list item

วิธีหนึ่งในการสร้างแถวนำทางระดับต่ำคือ นอกจากความเป็นไปตามที่ได้ระบุไว้ในวิธี 'มาตรฐาน' ของบทก่อน ยังต้องกำหนดองค์ประกอบ <li> ให้เป็น inline:

ตัวอย่าง

li {
  display: inline;
}

ทดลองด้วยตัวเอง

ตัวอย่างการอธิบาย：

display: inline; -โดยเริ่มต้น องค์ประกอบ <li> คือองค์ประกอบแบบบล็อค。ในที่นี้ เราลบออกจากลิงก์และหลังจากลิงก์เพื่อให้พวกเขาแสดงขึ้นในแถวเดียว

Floating list item

อีกวิธีหนึ่งที่สร้างแถวนำทางระดับต่ำคือ floating องค์ประกอบ <li> และกำหนดการจัดละแวกของลิงก์เพื่อนำทาง:

ตัวอย่าง

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

ทดลองด้วยตัวเอง

ตัวอย่างการอธิบาย：

  • float: left; - ใช้ float ทำให้องค์ประกอบแบบบล็อคเลื่อนเข้ากัน
  • display: block; - ทำให้ลิงก์แสดงขึ้นเป็นองค์ประกอบแบบบล็อคทำให้พื้นที่ทั้งหมดของลิงก์สามารถกดได้ (ไม่เพียงแต่ข้อความ) และอนุญาตให้เรากำหนดเพลิง (หากจำเป็น ยังสามารถกำหนดความสูง ความกว้าง มาร์เจน และอื่นๆ)
  • padding: 8px; - ทำให้องค์ประกอบแบบบล็อคดูงดีขึ้น
  • background-color: #dddddd; - เพิ่มสีพื้นหลังเงินทองให้แต่ละองค์ประกอบ

คำเตือน：ถ้าต้องการสีพื้นหลังทั้งหมดครอบคลุมเพื่อ background-color ให้เพิ่มเข้าไปใน <ul> แทนที่จะใช้ในแต่ละ <a> อิเล็ม:

ตัวอย่าง

ul {
  background-color: #dddddd;
}

ทดลองด้วยตัวเอง

ตัวอย่างแถวนำทางระดับต่ำ

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

ตัวอย่าง

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  text-align: center;
  padding: 14px 16px;
}
text-decoration: none;
/* แก้ไขสีของลิงก์เป็น #111 (สีดำ) เมื่อมุมมองเห็นได้ */
  li a:hover {
}

ทดลองด้วยตัวเอง

background-color: #111;

ลิงก์นำที่เป็นการเปิดและปัจจุบัน

ตัวอย่าง

เพิ่มความเป็น "active" ของลิงก์ปัจจุบันเพื่อให้ผู้ใช้รู้ว่าเขา/เธออยู่บนหน้าเว็บไหน:
  .active {
}

ทดลองด้วยตัวเอง

background-color: #4CAF50;

ปรับรูปแบบของลิงก์ที่ขวางผ่านการเลื่อนช่องข้อมูลที่มีการขวางไปทางขวาเพื่อปรับรูปแบบของลิงก์ที่ขวาง (float:right;

ตัวอย่าง

）：
  <ul>
  <li><a href="#home">หน้าหลัก</a></li>
  <li><a href="#news">ข่าว</a></li>
  <li><a href="#contact">ติดต่อ</a></li>
<li style="float:right"><a class="active" href="#about">เกี่ยวกับ</a></li>

ทดลองด้วยตัวเอง

</ul>

ขอบเส้นแยก เพิ่ม ขอบเส้นของ

ตัวอย่าง

/* เพิ่มขอบเส้นที่มีสีเทาน้อยที่ทุกช่องข้อมูล (last-child) ยกเว้น */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

ทดลองด้วยตัวเอง

แถวนำที่ติดตั้ง

ทำให้แถวนำคงอยู่ที่ด้านบนหรือด้านล่างของหน้าเว็บ แม้ว่าผู้ใช้จะเลื่อนหน้าเว็บด้วยเช่นกัน:

ติดตั้งที่ด้านบน

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

ทดลองด้วยตัวเอง

ติดตั้งที่ด้านล่าง

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

ทดลองด้วยตัวเอง

ประกาศการติดตั้งที่ไม่เคลื่อนตัวอาจไม่ทำงานได้ที่อุปกรณ์เคลื่อนที่

แถวนำระดับน้ำตาล

ตัวอย่างของแถวนำระดับน้ำตาลที่มีขอบเส้นที่มีสีเทาน้อย

ตัวอย่าง

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

ทดลองด้วยตัวเอง

แถวนำที่มีความเหมือนกัน

เพิ่ม position: sticky;เพื่อที่จะสร้างแถวนำที่มีความเหมือนกัน

องค์ประกอบที่มีความเหมือนกันจะเปลี่ยนระหว่างที่อยู่ที่ความยืดหย่องและติดตั้งตามตำแหน่งการเลื่อนที่เห็นได้ - จนกระทั่งมีการเกิดการย้ายที่ตำแหน่งที่กำหนดไว้ (เช่น position:fixed)。

ตัวอย่าง

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

ทดลองด้วยตัวเอง

ประกาศInternet Explorer, Edge 15 และเวอร์ชั่นที่เก่ากว่าไม่สนับสนุนการจัดตั้งติดตั้ง Safari ต้องใช้หลักฐาน -webkit- (ดูตัวอย่างที่บน) คุณยังต้องระบุ top、right、bottom หรือ left อย่างน้อยหนึ่ง ที่จะทำให้การจัดตั้งติดตั้งทำงาน

ตัวอย่างเพิ่มเติม

แถวนำที่ตอบสนองที่อยู่ด้านบน
ฝากลับเพื่อใช้ CSS คำถามมีเดีย ในการสร้างแถวนำที่ตอบสนองที่อยู่ด้านบน
แถวนำที่ตอบสนอง
ฝากลับเพื่อใช้ CSS คำถามมีเดีย ในการสร้างแถวนำที่ตอบสนอง
แถวนำที่ทำงานด้วยปุ่มลงด้านล่าง
ฝากลับเพื่อเพิ่มรายการที่มีทางเลือกในแถวนำ