Membuat Drop Down Menu pada Navbar Bootstrap

Tutorial penguasaan bootstrap kali ini akan membahas bagaimana cara membuat dropdown menu pada navigation bar (navbar) bootstrap.

Bila kita memiliki sebuah website yang memiliki banyak konten artikel, pastinya setiap konten tersebut kita kategorikan menurut label-label tertentu. Katakanlah kita memiliki konten tutorial web yang terdiri dari : PHP, HTML, Java Script dan Bootstrap. Disamping itu memiliki tutorial kategori lain. Nah khusus untuk kategori tutorial web, pada menunya kita kelompokkan label-label tersebut(PHP, HTML, Java Script dan Bootstrap) dengan nama menu "Tutorial Web". Jadi ketika user mengklik menu "Tutorial Web", baru akan ditampilkan sejumlah daftar label-label kategori tutorial web tersebut. Inilah yang kita sebut dropdown menu pada navigation bar.

Untuk mengimplementasikannya pada navigation bar bootstrap, kita dapat memanfaatkan komponen Dropown.

Yang perlu diperhatikan dalam komponen Dropdown adalah kode:

• data-toggle="dropdown", bagian ini yang membuat dropdown berjalan.
• class dropdown-menu akan menyajikan menu dalam bentuk list.

Hasil akhir yang diharapkan dalam tutorial ini ditunjukkan oleh Gambar.1 dibawah ini :

(Gambar.1 Output)

Langkah-langkah dropdown menu pada navbar

1. Disini kita akan membuat tampilan navbar yang menarik dengan memodifikasi dari class navbar navbar-default. Buatlah sebuah file, disini diberinama informatika.css yang berisikan kode :

.navbar-default .navbar-nav > li.clr1 a{
  color:#ffffff;
}
.navbar-default .navbar-nav > li.clr2 a{
 color: #FFEB3B;;
}
.navbar-default .navbar-nav > li.clr3 a{
 color: #5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a{
 color: #29AAE2;
}
.navbar-default .navbar-nav > li.clr1 a:hover, .navbar-default .navbar-nav > li.clr1.active a{
 color:#fff;
 background: #F55;
}
.navbar-default .navbar-nav > li.clr2 a:hover, .navbar-default .navbar-nav > li.clr2.active a{
 color: #fff;
 background:#973CB6;
}
.navbar-default .navbar-nav > li.clr3 a:hover, .navbar-default .navbar-nav > li.clr3.active a{
 color: #fff;
 background:#5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a:hover, .navbar-default .navbar-nav > li.clr4.active a{
 color: #fff;
 background: #29AAE2;
}
.navbar-default{
 background-color: #009688;
 font-size:18px;
}
.navbar-default .navbar-brand {
 color: #ffffff;
 font-weight:bold;
}
.navbar-default .navbar-text {
 color:#ffffff;
}

2. Langkah berikutnya, buatlah sebuah file yang diberinama menu_dropdown.html yang berisikan potongan kode sebagai beriku:

<div class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">Dunia Informatika</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="">Java</a></li>
    <li class="clr3"><a href="">English</a></li>
    
    <li class="clr4 dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown">Tutorial Web<span class="caret"></span></a>
       <ul class="dropdown-menu">
     <li><a href="about.html">PHP</a></li>
     <li><a href="about.html">HTML</a></li>
     <li><a href="about.html">Java Script</a></li>
     <li><a href="about.html">Bootstrap</a></li>
      </ul>
    </li>
   </ul>
  </div>
 </div>
</div>

Ketika program tersebut dijalankan akan dihasilkan seperti Gambar.1 diatas, namun jika dijalankan pada perangkat mobile, maka hasilnya akan ditampilkan seperti Gambar.2 dibawah ini :

(Gambar.2 )

Kode yang membuat munculnya tombol yang berisikan garis sebanyak tiga buah kebawah seperti gambar.2 diatas adalah :

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>

Sedangkan bagian yang menyebunyikan menu ketika ditampilkan dalam device mobile adalah kode berikut :

<div class="navbar-collapse collapse">
   .......
</div>

Live Preview Download