แถบนำทาง CSS
การสาธิต: แถบนำทาง
แถบนำทาง
การมีการนำทางที่ใช้งานง่ายเป็นสิ่งสำคัญสำหรับเว็บไซต์ใดๆ
ด้วย CSS คุณสามารถแปลงเมนู HTML ที่น่าเบื่อให้เป็นแถบนำทางที่ดูดีได้
แถบนำทาง = รายการลิงก์
แถบนำทางต้องการ HTML มาตรฐานเป็นฐาน
ในตัวอย่างของเรา เราจะสร้างแถบนำทางจากรายการ HTML มาตรฐาน
แถบนำทางนั้นเป็นรายการของลิงก์ ดังนั้นการใช้องค์ประกอบ <ul> และ <li> เหมาะสมอย่างยิ่ง:
ตัวอย่าง
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
ตอนนี้ มาลบสัญลักษณ์แสดงหัวข้อย่อยและระยะขอบและช่องว่างภายในออกจากรายการ:
ตัวอย่าง
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
ตัวอย่างอธิบาย:
list-style-type: none;
- ถอดกระสุนออก แถบนำทางไม่จำเป็นต้องมีเครื่องหมายรายการ- ตั้งค่า
margin: 0;
และpadding: 0;
ลบการตั้งค่าเริ่มต้นของเบราว์เซอร์
โค้ดในตัวอย่างด้านบนเป็นโค้ดมาตรฐานที่ใช้ในแถบการนำทางทั้งแนวตั้งและแนวนอน ซึ่งคุณจะได้เรียนรู้เพิ่มเติมในบทต่อไป