การสร้าง 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 »

การสร้าง 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) Viewed 5177 times
- ทำ 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) Viewed 5177 times
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 ไปตามเว็บที่เราต้องการ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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