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
การกำหนดตำแหน่งแบบติดหนึบในการทำงานbottom
left
ตัวอย่างเพิ่มเติม
ตอบสนอง Topnav
วิธีใช้คิวรีสื่อ CSS เพื่อสร้างการนำทางด้านบนที่ตอบสนอง
Sidenav ที่ตอบสนอง
วิธีใช้คิวรีสื่อ CSS เพื่อสร้างการนำทางด้านข้างที่ตอบสนอง
แถบนำทางแบบเลื่อนลง
วิธีเพิ่มเมนูดรอปดาวน์ในแถบนำทาง
เคยได้ยินเกี่ยวกับW3Schools Spacesไหม? ที่นี่คุณสามารถสร้างเว็บไซต์ของคุณตั้งแต่เริ่มต้นหรือใช้เทมเพลตและโฮสต์ได้ฟรี
เริ่มต้นฟรี ❯* ไม่ต้องใช้บัตรเครดิต