วันนี้ผมก็เอาวิธีการทำเมนูแนวนอนหรือ horizontal menu ด้วย css อย่างง่ายมาฝากครับ โดยเราจะใช้แท็ก ul ในการสร้างครับ อ้าวแล้วทำไม่ต้องใช้แท็กนี้ด้วยล่ะ จะเห็นว่าถ้ามีการใช้แท็ก table จะต้องมีการเขียนโค๊ดเยอะจะทำให้ขนาดของไฟล์เราใหญ่และใช้เวลาในการโหลดนานครับ ถ้าเราสังเกตดี ๆ จะเห็นว่า บริษัทที่รับออกแบบเว็บไซต์จะมีการอ้างด้วยว่า ไม่ได้ใช้แท็ก table ในการสร้าง layout เหตุผลที่ผมคิดก็เท่าที่ได้กล่าวมานั่นแหละครับ ถ้าใครคิดออกว่าเพราะไรอีกก็อย่าลืมเอามาแลกเปลี่ยนกันนะครับ เอาล่ะ บ่นมานานแล้ว งั้นเราก็เริ่มกันเลยแล้วกันนะครับ ก่อนอื่นเราก็ต้องสร้างส่วนที่เป็น html ก่อนนะครับ
<ul class=”navi”>
<li><a href=”one.html”>ONE</a></li>
<li><a href=”two.html”>TWO</a></li>
<li><a href=”three.html”>THREE</a></li>
<li><a href=”four.html”>FOUR</a></li>
</ul>
จากนั้นเราก็มาปรับรูปร่างหน้าตาของเมนูเราด้วย css ครับ
<style>
<!–
.navi{
list-style:none;
margin:0px 5px;
padding:0;
border-bottom:1px solid #ccc;
}
.navi li{
display:inline;
padding:0px 5px;
margin:0px 5px;
background:#ddd;
border:1px solid #ccc;
}
–>
</style>
ตัวอย่างโค๊ดที่ลองเอาไปรันดูบนเซิฟเวอร์ของเรานะครับ
<html>
<head>
<style>
<!–
.navi{
list-style:none;
margin:0px 5px;
padding:0;
}
.navi li{
display:inline;
padding:0px 5px;
margin:0px 5px;
background:#ddd;
border:1px solid #ccc;
}
–>
</style>
</head>
<body>
<ul class=”navi”>
<li><a href=”one.html”>ONE</a></li>
<li><a href=”two.html”>TWO</a></li>
<li><a href=”three.html”>THREE</a></li>
<li><a href=”four.html”>FOUR</a></li>
</ul>
</body>
</html>
ถ้ามีอะไรสงสัยก็ถามได้นะครับ มาร่วมเรียนรู้ไปพร้อม ๆ กันกับผมนะครับ