กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

CSS แถบนำทางแนวนอน


แถบนำทางแนวนอน

มีสองวิธีในการสร้างแถบนำทางแนวนอน การใช้รายการ แบบอินไลน์หรือแบบลอยตัว

รายการแบบอินไลน์

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

ตัวอย่าง

li {
  display: inline;
}

ตัวอย่างอธิบาย:

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

รายการลอยตัว

อีกวิธีหนึ่งในการสร้างแถบนำทางแนวนอนคือการลอยองค์ประกอบ <li> และระบุเค้าโครงสำหรับลิงก์การนำทาง:

ตัวอย่าง

li {
  float: left;
}

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

ตัวอย่างอธิบาย:

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

เคล็ดลับ:เพิ่มสีพื้นหลังให้กับ <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;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

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

เพิ่มคลาส "ใช้งานอยู่" ให้กับลิงก์ปัจจุบันเพื่อให้ผู้ใช้ทราบว่าเขา/เธออยู่ที่หน้าใด:

ตัวอย่าง

.active {
  background-color: #04AA6D;
}

ลิงค์ชิดขวา

จัดลิงก์ให้ชิดขวาโดยลอยรายการไปทางขวา ( float:right;):

ตัวอย่าง

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

วงเวียนชายแดน

เพิ่มborder-rightคุณสมบัติไปที่ <li> เพื่อสร้างตัวแบ่งลิงก์:

ตัวอย่าง

/* Add a gray right border to all list items, except the last item (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;ใน <ul> เพื่อสร้างแถบนำทางแบบติดหนึบ

องค์ประกอบแบบติดหนึบจะสลับไปมาระหว่างแบบสัมพันธ์และแบบคงที่ ขึ้นอยู่กับตำแหน่งการเลื่อน มีตำแหน่งสัมพันธ์กันจนกว่าจะพบตำแหน่งออฟเซ็ตที่กำหนดในวิวพอร์ต จากนั้นจึง "เกาะติด" เข้าที่ (เช่น ตำแหน่ง:คงที่)

ตัวอย่าง

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

หมายเหตุ: Internet Explorer ไม่สนับสนุนการวางตำแหน่งแบบติดหนึบ Safari ต้องใช้ -webkit- นำหน้า (ดูตัวอย่างด้านบน) คุณต้องระบุอย่างน้อยหนึ่งรายการtop, หรือ สำหรับ rightการกำหนดตำแหน่งแบบติดหนึบในการทำงานbottomleft


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

ตอบสนอง Topnav

วิธีใช้คิวรีสื่อ CSS เพื่อสร้างการนำทางด้านบนที่ตอบสนอง

Sidenav ที่ตอบสนอง

วิธีใช้คิวรีสื่อ CSS เพื่อสร้างการนำทางด้านข้างที่ตอบสนอง

แถบนำทางแบบเลื่อนลง

วิธีเพิ่มเมนูดรอปดาวน์ในแถบนำทาง

เคยได้ยินเกี่ยวกับW3Schools Spacesไหม? ที่นี่คุณสามารถสร้างเว็บไซต์ของคุณตั้งแต่เริ่มต้นหรือใช้เทมเพลตและโฮสต์ได้ฟรี

เริ่มต้นฟรี ❯

* ไม่ต้องใช้บัตรเครดิต