แถบนำทางประกอบด้วยรูปภาพกราฟิกที่วางอยู่ภายในแถวของเซลล์ตาราง เนื่องจากไม่แนะนำให้ใช้ตารางเพื่อค้นหาเนื้อหาเพจที่ไม่ใช่ตารางอีกต่อไป ผู้คนจำนวนมากที่สร้างเว็บจึงกำลังมองหาวิธี (ใหม่) ในการใช้โครงสร้าง
มาร์กอัป XHTML และการจัดรูปแบบ CSS เพื่อสร้างแถบนำทาง
แถบนำทาง CSS แบบธรรมดา
บางทีวิธีแก้ปัญหาที่ง่ายที่สุดในการสร้างแถบนำทางข้อความสไตล์ CSS ก็คือการวางลิงก์ทั้งหมดไว้ในข้อความบรรทัดเดียว ดังตัวอย่าง A
แนวทางนี้ดูสมเหตุสมผลและใช้งานง่าย แต่ปัญหาคือการวางลิงก์ทั้งหมดไว้ในข้อความบรรทัดเดียวทำให้ยากต่อการควบคุมช่องว่างระหว่างลิงก์และก่อนและหลังลิงก์ ดังนั้น เพื่อหลีกเลี่ยงไม่ให้ลิงก์ทั้งหมดของคุณอัดแน่น คุณควรจะดีกว่า
หลังจากนั้นคุณมักจะต้องแทรกไปป์ (แถบแนวตั้ง) และอักขระช่องว่างที่ไม่ใช่บรรทัดใหม่เป็นตัวคั่น
ดังที่โค้ดด้านล่างนี้แสดง ผลลัพธ์ที่ได้คือมาร์กอัปที่มีโครงสร้างชัดเจนซึ่งเราต้องการ
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <div id="navbar1"> <a href="link1a.html">ปุ่ม 1</a> | <a href="link2a.html ">ปุ่ม 2</a> | <a href="link3a.html "> ปุ่ม 3</a> </div> |
แถบนำทาง CSS แบบรายการ อีกวิธีหนึ่งในการสร้างแถบนำทาง CSS คือการใช้แท็ก <ul> และ <li> เพื่อแสดงลิงก์เป็นรายการแบบไม่เรียงลำดับ
เมื่อมองแวบแรก การใช้รายการที่ไม่เรียงลำดับสำหรับแถบนำทางดูเหมือนจะขัดกับสัญชาตญาณ เพราะเราคุ้นเคยกับการคิดถึงรายการที่ไม่เรียงลำดับว่าเป็นรายการของรายการที่ถูกดันขึ้นในแนวตั้ง โดยมีสัญลักษณ์แสดงหัวข้อย่อยอยู่ข้างหน้าแต่ละรายการ ดูเหมือนว่าจะไม่สอดคล้องกับการวางแนวนอนของแถบนำทาง
อย่างไรก็ตาม โครงสร้างเชิงตรรกะของรายการในฐานะคอลเลกชันของรายการอิสระสามารถนำไปใช้กับลิงก์ในแถบนำทางได้ และกฎ CSS ช่วยให้คุณสามารถบังคับแทนที่การนำเสนอเริ่มต้นของรายการ กำจัดสัญลักษณ์แสดงหัวข้อย่อย และจัดเรียงรายการบนเพจแทน ของลอยด้านล่าง
เมื่อทราบสิ่งนี้แล้ว ตอนนี้เรามาดูตัวอย่าง B กันดีกว่า โดยสร้างแถบนำทางแบบ CSS และ XHTML ตามรายการที่ไม่ได้เรียงลำดับ
นี่คือมาร์กอัป XHTML:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <div id="navbar2"> |
นี่คือโค้ด CSS สำหรับแปลงรายการลิงก์ข้อความเป็นแถบนำทาง:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: div#navbar2 { |