Tutorial Bootstrap 3 Dropdown
TrikSonic - Apa itu Dropdown pada Bootstrap ? Dropdown adalah Bentuk menu yang menurun ke bawah pada tampilan Graphical User Interface biasaya berupa list box, yang diperuntukan untuk user dalam memilih opsi yang tersedia
Catatan : jQuery dan bootstrap Plugin diperlukan untuk Dropdown Bootstrap
Contoh Dropdown
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 Dropdown</h2> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </section> <!-- jquery, bootstrap js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Dropup
Jika ingin tampilan menu yang keluar berada diatas element Pemicu gunakan class .dropup pada pembungkus utama.
Contoh :
<div class="dropup">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 Dropup</h2> <br/><br/><br/><br/> <div class="dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </section> <!-- jquery, bootstrap js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Dropdown Posisi
Untuk mengatur keselarasan atau posisi menu dropdown, gunakan class
.dropdown-menu-left
(untuk posisi kiri) dan .dropdown-menu-right
(untuk posisi kanan).Jika metode ini diterapkan maka dropdown akan menyesuaikan posisi dengan lebar pembungkus nya.
Contoh :
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <style> .example { width : 250px; background : pink; padding : 5px; } </style> </head> <body> <section class="container"> <h2>Bootstrap 3 Dropdown</h2> <div class="example"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </div> </section> <!-- jquery, bootstrap js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Dropdown Headers
Digunakan untuk judul atau label pada daftar menu. Untuk menerapkannya tambahkan class
.dropdown-header
pada element <li>
yang berada didalam element <ul class="dropdown-menu">...</ul>Contoh :
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Tutorial</li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="dropdown-header">Judul 2</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 Dropdown Header</h2> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">Tutorial</li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li class="dropdown-header">Judul 2</li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div> </section> <!-- jquery, bootstrap js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Dropdown Divider
Divider pada dropdown Bootstrap berfungsi sebagai pembatas antar daftar menu.
Untuk menerapkannya tambahkan class
.divider
pada element <li>
Contoh :
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li class="divider"></li>
<li><a href="#">Link Terpisah</a></li>
</ul>
</div>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 Dropdown <code>Divider</code></h2> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li class="divider"></li> <li><a href="#">Link Terpisah</a></li> </ul> </div> </section> <!-- jquery, bootstrap js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Dropdown Active dan Disabled
Untuk menampilkan daftar menu yang sedang aktif gunakan class
.active
pada element <li>
yang berada dalam area <ul class="dropdown-menu">..</ul>
Sedangkan untuk memberikan tampilan nonaktif pada daftar menu gunakan class
.disabled
Contoh :
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">Active List</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled List</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 Dropdown <code>Divider</code></h2> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="active"><a href="#">Active List</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="disabled"><a href="#">Disabled List</a></li> <li><a href="#">Link</a></li> </ul> </div> </section> <!-- jquery, bootstrap js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Posting Komentar