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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: การสร้าง dropdown และการใส่ link ใน dropdown

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

by m038 » 01/08/2016 3:49 pm

การสร้าง 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 2487 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 2487 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 ไปตามเว็บที่เราต้องการ

Top