Devdit
 

Bootstrap สร้างเมนูด้านข้างของเว็บไซต์ ด้านซ้าย และขวา

4.3K

สอน Bootstrap สร้างเมนูด้านข้างของเว็บไซต์ ด้านซ้าย และขวา โดยใช้ class nav ของ Bootstrap ตัวอย่างแนะนำการใช้ class nav เพื่อสร้างเมนูแบบเรียงทีละเมนูอยู่ทางด้านซ้าย หรืออยู่ทางด้านขวา สามารถเขียนโปรแกรมได้ดังนี้

 

ตัวอย่างที่ 1 Bootstrap สร้างเมนูด้านข้างของเว็บไซต์ ด้านซ้าย

<nav class="nav flex-column nav-pills">
    <a class="nav-link active"href="#">หน้าแรก</a>
    <a class="nav-link" href="#">สินค้า</a>
    <a class="nav-link" href="#">ติดต่อเรา</a>
</nav>

 

ตัวอย่างที่ 2 Bootstrap สร้างเมนูด้านข้างของเว็บไซต์ ด้านขวา

<nav class="nav flex-column nav-pills" style="float:right;">
    <a class="nav-link active"href="#">หน้าแรก</a>
    <a class="nav-link" href="#">สินค้า</a>
    <a class="nav-link" href="#">ติดต่อเรา</a>
</nav>

คำอธิบาย

Bootstrap สร้างเมนูด้านข้างของเว็บไซต์ ตัวอย่างใช้ class nav เพื่อสร้างส่วนเมนูควบคุมหลัก และใช้ class nav-link สำหรับเมนูแต่ละเมนูที่อยู่ภายใน class nav ซึ่งค่า default เมนูด้านข้างจะอยู่ทางซ้าย หากต้องการให้เมนูด้านข้างอยู่ทางขวา แนะนำให้ใช้คำสั่ง float: right กำหนดไว้ใน class nav

แก้ไข 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ