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

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

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

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

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

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

Bootstrap SubMenu Responsive ย่อเมนูตาม ขนาดหน้าจอ ดาวน์โหลดไฟล์ตัวอย่างได้ที่ :
bootstrap.zip
(197.55 KiB) ดาวน์โหลดแล้ว 472 ครั้ง
2-10-2557 14-56-50.png
2-10-2557 14-56-50.png (48.91 KiB) Viewed 4105 times
2-10-2557 14-39-55.png
2-10-2557 14-39-55.png (29.45 KiB) Viewed 4105 times
ขั้นตอนที่ 1. ดาวน์โหลด library bootstrap ที่ http://getbootstrap.com/ เพื่อใช้งาน
2-10-2557 14-43-46.png
2-10-2557 14-43-46.png (8.15 KiB) Viewed 4105 times
ขั้นตอนที่ 2. เขียนโครงสร้างไฟล์ เพื่อใช้งาน bootstrap ในไฟล๋ HTML
2-10-2557 14-42-29.png
2-10-2557 14-42-29.png (51.25 KiB) Viewed 4105 times
ขั้นตอนที่ 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) Viewed 4105 times
แสดงผล
2-10-2557 12-01-10.png
2-10-2557 12-01-10.png (35.86 KiB) Viewed 4092 times
** เติมสีให้กับ พิ้นที่สร้าง Menu **
2-10-2557 12-03-50.png
2-10-2557 12-03-50.png (38.97 KiB) Viewed 4092 times
2-10-2557 12-05-37.png
2-10-2557 12-05-37.png (37.29 KiB) Viewed 4092 times
ขั้นตอนที่ 4. สร้างแถบ container เพื่อสร้าง ปุ่ม ที่แสดง Menu ตอน ย่อหน้า รองรับการเปิดกับมือถือเเละเเท็บเล็ต
2-10-2557 15-12-15.png
2-10-2557 15-12-15.png (43.57 KiB) Viewed 4105 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 เมื่อมีการย่อของขนาดจอ
แก้ไขล่าสุดโดย thatsawan เมื่อ 02/10/2014 3:46 pm, แก้ไขไปแล้ว 1 ครั้ง.
ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

ขั้นตอนที่ 5. สร้าง Menu
2-10-2557 15-19-44.png
2-10-2557 15-19-44.png (65.03 KiB) Viewed 4104 times
ผลของการไม่ใส่ Class หรือ ใส่ Class ผิด
2-10-2557 12-51-49.png
2-10-2557 12-51-49.png (35.98 KiB) Viewed 4091 times
คำอธิบาย ::

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

<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) Viewed 4104 times
ขั้นตอนที่ 6. สร้าง Sub Menu
2-10-2557 15-38-47.png
2-10-2557 15-38-47.png (54.35 KiB) Viewed 4091 times
คำอธิบาย ::

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

 <li class="divider"></li>
คือแสดงเส้นแบ่ง Menu
การแสดงผล
2-10-2557 14-56-50.png
2-10-2557 14-56-50.png (48.91 KiB) Viewed 4104 times
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 28