Bootstrap SubMenu Responsive ย่อเมนูตาม ขนาดหน้าจอ ดาวน์โหลดไฟล์ตัวอย่างได้ที่ :
- 2-10-2557 14-56-50.png (48.91 KiB) Viewed 4139 times
- 2-10-2557 14-39-55.png (29.45 KiB) Viewed 4139 times
ขั้นตอนที่ 1. ดาวน์โหลด library bootstrap ที่
http://getbootstrap.com/ เพื่อใช้งาน
- 2-10-2557 14-43-46.png (8.15 KiB) Viewed 4139 times
ขั้นตอนที่ 2. เขียนโครงสร้างไฟล์ เพื่อใช้งาน bootstrap ในไฟล๋ HTML
- 2-10-2557 14-42-29.png (51.25 KiB) Viewed 4139 times
ขั้นตอนที่ 3. กำหนดพื้นที่เพื่อสร้าง เเถบ Menu ด้วยแถบ
โค้ด: เลือกทั้งหมด
<nav class="navbar" role="navigation"> </nav>
- 2-10-2557 15-04-32.png (52.74 KiB) Viewed 4139 times
แสดงผล
- 2-10-2557 12-01-10.png (35.86 KiB) Viewed 4126 times
** เติมสีให้กับ พิ้นที่สร้าง Menu **
- 2-10-2557 12-03-50.png (38.97 KiB) Viewed 4126 times
- 2-10-2557 12-05-37.png (37.29 KiB) Viewed 4126 times
ขั้นตอนที่ 4. สร้างแถบ container เพื่อสร้าง ปุ่ม ที่แสดง Menu ตอน ย่อหน้า รองรับการเปิดกับมือถือเเละเเท็บเล็ต
- 2-10-2557 15-12-15.png (43.57 KiB) Viewed 4139 times
คำอธิบาย ::
โค้ด: เลือกทั้งหมด
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
คือส่วนที่ สร้าง icon เมื่อมีการย่อของขนาดจอ