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

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

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

m038
PHP Sr. Member
PHP Sr. Member
Posts: 59
Joined: 29/07/2016 10:40 am

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

Post by m038 »

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

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

Code: Select all

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

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

Code: Select all

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

Code: Select all

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

Code: Select all

<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 ที่เราต้องการใช้เพื่อแสดงไปยังหน้าเว็บ

Code: Select all

<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
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 1 guest