Bootstrap SubMenu Responsive ย่อเมนูตาม ขนาดหน้าจอ

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 9755
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Bootstrap SubMenu Responsive ย่อเมนูตาม ขนาดหน้าจอ

โพสต์โดย thatsawan » 02/10/2014 3:19 pm

Bootstrap SubMenu Responsive ย่อเมนูตาม ขนาดหน้าจอ ดาวน์โหลดไฟล์ตัวอย่างได้ที่ :
bootstrap.zip
(197.55 KiB) ดาวน์โหลด 201 ครั้ง

2-10-2557 14-56-50.png
2-10-2557 14-56-50.png (48.91 KiB) เปิดดู 1928 ครั้ง

2-10-2557 14-39-55.png
2-10-2557 14-39-55.png (29.45 KiB) เปิดดู 1928 ครั้ง

ขั้นตอนที่ 1. ดาวน์โหลด library bootstrap ที่ http://getbootstrap.com/ เพื่อใช้งาน
2-10-2557 14-43-46.png
2-10-2557 14-43-46.png (8.15 KiB) เปิดดู 1928 ครั้ง

ขั้นตอนที่ 2. เขียนโครงสร้างไฟล์ เพื่อใช้งาน bootstrap ในไฟล๋ HTML
2-10-2557 14-42-29.png
2-10-2557 14-42-29.png (51.25 KiB) เปิดดู 1928 ครั้ง

ขั้นตอนที่ 3. กำหนดพื้นที่เพื่อสร้าง เเถบ Menu ด้วยแถบ

โค้ด: เลือกทั้งหมด

<nav class="navbar" role="navigation">   </nav>

2-10-2557 15-04-32.png
2-10-2557 15-04-32.png (52.74 KiB) เปิดดู 1928 ครั้ง

แสดงผล
2-10-2557 12-01-10.png
2-10-2557 12-01-10.png (35.86 KiB) เปิดดู 1915 ครั้ง

** เติมสีให้กับ พิ้นที่สร้าง Menu **
2-10-2557 12-03-50.png
2-10-2557 12-03-50.png (38.97 KiB) เปิดดู 1915 ครั้ง

2-10-2557 12-05-37.png
2-10-2557 12-05-37.png (37.29 KiB) เปิดดู 1915 ครั้ง

ขั้นตอนที่ 4. สร้างแถบ container เพื่อสร้าง ปุ่ม ที่แสดง Menu ตอน ย่อหน้า รองรับการเปิดกับมือถือเเละเเท็บเล็ต
2-10-2557 15-12-15.png
2-10-2557 15-12-15.png (43.57 KiB) เปิดดู 1928 ครั้ง

คำอธิบาย ::

โค้ด: เลือกทั้งหมด

 <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 เมื่อมีการย่อของขนาดจอ
แก้ไขล่าสุดโดย thatsawan เมื่อ 02/10/2014 3:46 pm, แก้ไขไปแล้ว 1 ครั้ง.

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 9755
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Re: Bootstrap SubMenu Responsive ย่อเมนูตาม ขนาดหน้าจอ

โพสต์โดย thatsawan » 02/10/2014 3:40 pm

ขั้นตอนที่ 5. สร้าง Menu
2-10-2557 15-19-44.png
2-10-2557 15-19-44.png (65.03 KiB) เปิดดู 1927 ครั้ง

ผลของการไม่ใส่ Class หรือ ใส่ Class ผิด
2-10-2557 12-51-49.png
2-10-2557 12-51-49.png (35.98 KiB) เปิดดู 1914 ครั้ง

คำอธิบาย ::

โค้ด: เลือกทั้งหมด

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

ผลการสร้าง เมนู สังเกตุว่าเมื่อเราย่อขนาดของ หน้าจอ เมนู จะต้องหายไป ให้เราทำการเพิ่ม class
ใน เเท็ก div
- class="collapse" คือสั่งให้เมนูหายไป
- class="collapse navbar-collapse" คือให้เมนูมันหายไปตอนที่ขนาดหน้าจอเล็กลง
- id="bs-example-navbar-collapse-1" คือ เมื่อย่อขนาดเมนูจะย้ายเข้าไปอยู่ใน
การแสดงผล
2-10-2557 14-25-28.png
2-10-2557 14-25-28.png (52.71 KiB) เปิดดู 1927 ครั้ง

ขั้นตอนที่ 6. สร้าง Sub Menu
2-10-2557 15-38-47.png
2-10-2557 15-38-47.png (54.35 KiB) เปิดดู 1914 ครั้ง

คำอธิบาย ::

โค้ด: เลือกทั้งหมด

 <li class="divider"></li>

คือแสดงเส้นแบ่ง Menu
การแสดงผล
2-10-2557 14-56-50.png
2-10-2557 14-56-50.png (48.91 KiB) เปิดดู 1927 ครั้ง


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน