Dropdowns เป็นลูกเล่นหนึ่งของ
Bootstrap ซึงเป็นตัวช่วยในการสร้างหน้า
เว็บไซต์ให้มีความสวยงามมากขึ้น Dropdowns จะมีความสวยงามมากกว่าปุ่มทั่วไป ลักษณะของ Dropdowns จะเป็น
ปุ่มเมนูที่เมื่อใช้เมาส์กดแล้วจะมีรายการเรียงลงมาให้เลือก
Dropdowns มีทั้งหมด 5 รูปแบบที่แตกต่างกันดังนี้
วิธีนำไปใช้งาน
1.นำโค้ดด้านล่างนี้ไปไว้ใน <head>
โค้ด: เลือกทั้งหมด
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
2.เลือกรูปแบบของ Dropdown ที่ต้องการนำไปใช้แล้ววางโค้ดด้านล่างนี้ในส่วนของ <body>
รูปแบบของ Dropdowns
รูปแบบที่ 1 Basic Dropdown เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง
นำโค้ดด้านล่างนี้ไปไว้ในส่วนของ <body>
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>จังหวัด</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" 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>
<li><a href="#">เชียงราย</a></li>
<li><a href="#">ขอนแก่น</a></li>
<li><a href="#">ภูเก็ต</a></li>
<li><a href="#">เลย</a></li>
<li><a href="#">ระยอง</a></li>
</ul>
</div>
</div>
- Screenshot_283.jpg (6.28 KiB) Viewed 4635 times
- Screenshot_282.jpg (13.26 KiB) Viewed 4635 times
รูปแบบที่ 2 Dropdown Header เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่จะไม่เหมือนกับ Basic Dropdown ตรงที่จะมีหัวข้อใหญ่แสดงข้อมูลกำกับไว้ และมีเมนูย่อยให้เลือกด้านล่าง
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>จังหวัด</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกจังหวัด
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">ภาคเหนือ</li>
<li><a href="#">เชียงใหม่</a></li>
<li><a href="#">เชียงราย</a></li>
<li class="divider"></li>
<li class="dropdown-header">ภาคอีสาน</li>
<li><a href="#">โคราช</a></li>
<li><a href="#">บุรีรัมย์</a></li>
</ul>
</div>
</div>
- Screenshot_281.jpg (8.17 KiB) Viewed 4635 times
- Screenshot_280.jpg (11.92 KiB) Viewed 4635 times
รูปแบบที่ 3 Disable and Active items เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่จะมีบางรายการที่ไม่สามารถเลือกได้
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>Zone ที่นั่ง</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกZoneที่นั่ง
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Zone A</a></li>
<li class="disabled"><a href="#">Zone B (เต็ม)</a></li>
<li class="active"><a href="#">Zone C</a></li>
<li><a href="#">Zone D</a></li>
</ul>
</div>
</div>
- Screenshot_279.jpg (7.49 KiB) Viewed 4635 times
- Screenshot_286.jpg (14.23 KiB) Viewed 4635 times
รูปแบบที่ 4 Dropdown Position เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่รายการจะอยู่ทางด้านขวา ไม่ได้อยู่ติดกับที่ปุ่ม
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>Menu</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือก
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">copy</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Paste</a></li>
</ul>
</div>
</div>
- Screenshot_285.jpg (7.84 KiB) Viewed 4635 times
รูปแบบที่ 5 Dropup เมื่อคลิกที่ปุ่มจะมีเมนูรายการขึ้นมาทางด้านบนของปุ่ม เหมาะสำหรับนำปุ่มไปไว้ทางด้านล่างของเว็บเพื่อแสดงรายการเรียงไว้ด้านบน
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>ห้อง</h2>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกห้อง
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">ห้อง 1</a></li>
<li><a href="#">ห้อง 2</a></li>
</ul>
</ul>
</div>
</div>
- Screenshot_288.jpg (6.68 KiB) Viewed 4635 times
- Screenshot_287.jpg (6.17 KiB) Viewed 4635 times
Dropdowns เป็นลูกเล่นหนึ่งของ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3963-bootstrap.html]Bootstrap[/url] ซึงเป็นตัวช่วยในการสร้างหน้า[url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3585-website-%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C.htmll]เว็บไซต์[/url]ให้มีความสวยงามมากขึ้น Dropdowns จะมีความสวยงามมากกว่าปุ่มทั่วไป ลักษณะของ Dropdowns จะเป็น[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css/4884-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%81%E0%B8%96%E0%B8%9A%E0%B9%80%E0%B8%A1%E0%B8%99%E0%B8%B9%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%81%E0%B8%96%E0%B8%9A%E0%B9%80%E0%B8%A1%E0%B8%99%E0%B8%B9%E0%B8%A2%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B9%83%E0%B8%99-bootstrap-%E0%B8%9A%E0%B8%B9%E0%B8%98%E0%B8%AA%E0%B9%81%E0%B8%97%E0%B8%A3%E0%B9%87%E0%B8%9B.html]ปุ่มเมนู[/url]ที่เมื่อใช้เมาส์กดแล้วจะมีรายการเรียงลงมาให้เลือก
Dropdowns มีทั้งหมด 5 รูปแบบที่แตกต่างกันดังนี้
[b]
วิธีนำไปใช้งาน[/b]
[b]1.นำโค้ดด้านล่างนี้ไปไว้ใน <head>[/b]
[code]
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
[/code]
[b]2.เลือกรูปแบบของ Dropdown ที่ต้องการนำไปใช้แล้ววางโค้ดด้านล่างนี้ในส่วนของ <body>[/b]
[b]รูปแบบของ Dropdowns[/b]
รูปแบบที่ 1 Basic Dropdown เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง
นำโค้ดด้านล่างนี้ไปไว้ในส่วนของ <body>
[code]
<div class="container">
<h2>จังหวัด</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" 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>
<li><a href="#">เชียงราย</a></li>
<li><a href="#">ขอนแก่น</a></li>
<li><a href="#">ภูเก็ต</a></li>
<li><a href="#">เลย</a></li>
<li><a href="#">ระยอง</a></li>
</ul>
</div>
</div>
[/code]
[attachment=3]Screenshot_285.jpg[/attachment]
[attachment=2]Screenshot_286.jpg[/attachment]
รูปแบบที่ 2 Dropdown Header เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่จะไม่เหมือนกับ Basic Dropdown ตรงที่จะมีหัวข้อใหญ่แสดงข้อมูลกำกับไว้ และมีเมนูย่อยให้เลือกด้านล่าง
[code]
<div class="container">
<h2>จังหวัด</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกจังหวัด
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">ภาคเหนือ</li>
<li><a href="#">เชียงใหม่</a></li>
<li><a href="#">เชียงราย</a></li>
<li class="divider"></li>
<li class="dropdown-header">ภาคอีสาน</li>
<li><a href="#">โคราช</a></li>
<li><a href="#">บุรีรัมย์</a></li>
</ul>
</div>
</div>
[/code]
[attachment=9]Screenshot_279.jpg[/attachment]
[attachment=8]Screenshot_280.jpg[/attachment]
รูปแบบที่ 3 Disable and Active items เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่จะมีบางรายการที่ไม่สามารถเลือกได้
[code]<div class="container">
<h2>Zone ที่นั่ง</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกZoneที่นั่ง
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Zone A</a></li>
<li class="disabled"><a href="#">Zone B (เต็ม)</a></li>
<li class="active"><a href="#">Zone C</a></li>
<li><a href="#">Zone D</a></li>
</ul>
</div>
</div>[/code]
[attachment=7]Screenshot_281.jpg[/attachment]
[attachment=6]Screenshot_282.jpg[/attachment]
รูปแบบที่ 4 Dropdown Position เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่รายการจะอยู่ทางด้านขวา ไม่ได้อยู่ติดกับที่ปุ่ม
[code]
<div class="container">
<h2>Menu</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือก
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">copy</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Paste</a></li>
</ul>
</div>
</div>
[/code]
[attachment=5]Screenshot_283.jpg[/attachment]
[attachment=4]Screenshot_284.jpg[/attachment]
รูปแบบที่ 5 Dropup เมื่อคลิกที่ปุ่มจะมีเมนูรายการขึ้นมาทางด้านบนของปุ่ม เหมาะสำหรับนำปุ่มไปไว้ทางด้านล่างของเว็บเพื่อแสดงรายการเรียงไว้ด้านบน
[code]
<div class="container">
<h2>ห้อง</h2>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกห้อง
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">ห้อง 1</a></li>
<li><a href="#">ห้อง 2</a></li>
</ul>
</ul>
</div>
</div>
[/code]
[attachment=1]Screenshot_287.jpg[/attachment]
[attachment=0]Screenshot_288.jpg[/attachment]