Hai semuanya….
Pada tutorial kali, kita akan belajar membuat menu dropdown dengan Bootstrap, menu dropdown merupakan sebuah menu yang dapat ditoggle serta dapat memilih opsi yang telah ditentukan.
Membuat Menu Dropdown.
Untuk membuat sebuah menu dropdown, buatlah sebuah tag <div> lalu tambahkan class “dropdown”, contohnya seperti berikut.
<div class="dropdown">
...
</div>
Selanjutnya, didalam tag <div> tersebut, buatlah tag <button> dan tambahkan atribut class = “btn btn-primary” dan “dropdown-toggle”, type=”button”, data-toggle= ”dropdown”, serta buatlah didalam tag <button> sebuah text “Menu Dropdown”, tag <span> tambahkan class “caret” di, contohnya sebagai berikut. <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
</div>
Berikutnya, masih didalam tag <div>, buatlah tag <ul> dan tambahkan class “dropdown-menu” dan didalam tag <ul>, buatlah tag <li> yang masing masingnya memiliki tag <a href=”#”> didalamnya, contohnya seperti berikut.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Desclimer</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Video</a></li>
</ul> </div>
</div>
Hasilnya.
Ketika, mengklik Menu Dropdown, maka opsinya akan muncul, dapat dilihat seperti berikut.
Menambahkan Opsi Header Menu Dropdown
Selanjutnya, kita dapat membuat sebuah header dari opsi dropdownnya, untuk membuat header pada opsinya, buatlah tag <li> dan tambahkan class “dropdown-header”, taruh didalam dropdown menu, contohnya seperti berikut.
<div class=”dropdown”>
<button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Menu Dropdown <span class=”caret”></span></button>
<ul class=”dropdown-menu”>
<li class=”dropdown-header”>Informasi</li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Desclimer</a></li>
<li class=”dropdown-header”>Material</li>
<li><a href=”#”>Tutorial</a></li>
<li><a href=”#”>Download</a></li>
<li><a href=”#”>Template</a></li>
<li><a href=”#”>Video</a></li>
</ul>
</div>
Hasilnya.
Memisahkan Opsi Menu Dropdown
Selain dapat menambahkan header pada opsi menu dropdown, kita juga dapat memisahkan opsinya dengan menggunakan class “divider”, menambahkan class “divider” pada tag <li>, contohnya seperti berikut.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Informasi</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Desclimer</a></li>
<li class="divider"></li>
<li class="dropdown-header">Material</li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Video</a></li>
</ul>
</div>
Hasilnya.
Dropup
Selain Dropdown, kita juga dapat membuat sebuah dropup, caranya, ganti class “dropdown” menjadi “dropup”, pada tag <div> yang menjadi pembungkusnya, contohnya seperti berikut.
<div class="dropup">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Informasi</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Desclimer</a></li>
<li class="divider"></li>
<li class="dropdown-header">Material</li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Video</a></li>
</ul>
</div>
Hasilnya.
Sekian, tutorial membuat dropdown dengan Bootstrap, semoga teman teman paham dan mengerti dengan tutorial ini dan bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah ya, terima kasih.
0 komentar:
Post a Comment