การสร้าง dropdown และการใส่ link ใน dropdown

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

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

m038
PHP Sr. Member
PHP Sr. Member
โพสต์: 59
ลงทะเบียนเมื่อ: 29/07/2016 10:40 am

การสร้าง dropdown และการใส่ link ใน dropdown

โพสต์โดย m038 » 01/08/2016 3:49 pm

การสร้าง dropdown และการใส่ link ใน dropdown
1. เริ่มต้นจากการระบุว่าเราจะต้องทำ dropdown อะไร เช่นตัวอย่างที่จะทำนี้คือ dropdown ของจังหวัดนครนายก
โดยจะมีข้อมูลในส่วนของ
- ประวัติของจังหวัดนครนายก
- คำขวัญนครนายก
- สถานที่ท่องเที่ยวของจังหวัดนครนายก

2. ประกาศ container ในการจัดการข้อมูลให้อยู่ภายใน container

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

<div class="container">........(ข้อมูลภายใน)........</div>


3. สร้างปุ่มขึ้นมาเพื่อใช้ในการทำ dropdown menu ที่เราต้องการเพื่อทีจะสร้างเมนูย่อยๆ ลงไป โดยที่เมนูย่อยๆ ของเรานั้นก็จะมี ประวัติของจังหวัดนครนายก
คำขวัญนครนายก และสถานที่ท่องเที่ยวของจังหวัดนครนายก ตามที่เราต้องการ

- โดยการประกาศ button (ปุ่ม) และเรียก class มาใช้งาน

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

<div class="container">
  <div class="dropdown">
    <button class="btn btn-success" type="button">จังหวัดนครนายก</button>
  </div>
</div>

* ซึ่ง class ที่เรียกใช้นั้นมีหลายแบบตามความต้องการที่เราจะเรียกใช้งาน ในส่วนนี้จะเลือกใช้ class btn btn-success ดังภาพ
aa.png
aa.png (9.9 KiB) เปิดดู 159 ครั้ง


- ทำ dropdown menu ให้กับปุ่มที่เราต้องการ โดยการประกาศ ul เป็นการแสดงผลแบบรายการ ซึ่งจะมี li เป็นรายการย่อยภายใน ul

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

<div class="container">
  <div class="dropdown">
    <button class="btn btn-success" type="button" data-toggle="dropdown">จังหวัดนครนายก
 <span class="caret"></span>   
</button>
    <ul class="dropdown-menu">
      <li>- ประวัติจังหวัดนครนายก</a></li>
      <li>- คำขวัญประจำจังหวัดนครนายก</a></li>
      <li>- แหล่งท่องเที่ยวของจังหวัดนครนายก</a></li>
    </ul>
  </div>
</div>

จะได้ dropdown-menu ดังภาพ
cc.png
cc.png (11.3 KiB) เปิดดู 159 ครั้ง


4. เมื่อเราได้ dropdown-menu ที่ของจังหวัดนครนายกที่เราต้องการแล้ว ก็จะมาทำการ link ไปยังแต่ล่ะเมนู
- ประกาศคำสั่ง <a href="#"> เป็นคำสั่งที่ใช้ในการ link ไปยังเว็บที่เราต้องการจะแสดง ซึ่งตอนนี้ยังไม่สามารถ link ได้ เพราะเราต้องแทนที่ "#" เป็น
url ที่เราจะ link ไป

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

<div class="container">
  <div class="dropdown">
    <button class="btn btn-success" type="button" data-toggle="dropdown">จังหวัดนครนายก
 <span class="caret"></span>   
</button>
    <ul class="dropdown-menu">
      <li><a href="#">- ประวัติจังหวัดนครนายก</a></li>
      <li><a href="#">- คำขวัญประจำจังหวัดนครนายก</a></li>
      <li><a href="#">- แหล่งท่องเที่ยวของจังหวัดนครนายก</a></li>
    </ul>
  </div>
</div>


- เปลี่ยน "#" เป็น url ที่เราต้องการใช้เพื่อแสดงไปยังหน้าเว็บ

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

<div class="container">
  <div class="dropdown">
    <button class="btn btn-success" type="button" data-toggle="dropdown">จังหวัดนครนายก
 <span class="caret"></span>   
</button>
    <ul class="dropdown-menu">
      <li><a href="https://nut2nutyou.wordpress.com/">- ประวัติจังหวัดนครนายก</a></li>
      <li><a href="https://kumkhunforget.wordpress.com">- คำขวัญประจำจังหวัดนครนายก</a></li>
      <li><a href="http://www.painaidii.com">- แหล่งท่องเที่ยวของจังหวัดนครนายก</a></li>
    </ul>
  </div>
</div>

* เมื่อเลือกไปยังประวัติจังหวัดนครนายก คำขวัญประจำจังหวัดนครนายก หรือ แหล่งท่องเที่ยวของจังหวัดนครนายก ก็จะ link ไปตามเว็บที่เราต้องการ

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

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

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