Membuat Dropdown Menu Vertikal dengan Bootstrap

Sudah lama tidak nulis di blog ini, sedikit berbagi walaupun sekedar dasar dalam penggunaan bootstrap untuk membuat menu dalam bentuk vertikal, seperti biasa perlu menyiapkan core system dari bootstrap atau dapat menggunakan

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
    https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
     http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js

diletakan di antara <head> dan </head>, untuk membuat menu vertikal silahkan gunakan code di bawah ini, terdapat satu dropdown menu.

<ul class=”nav nav-pills nav-stacked”>
 <li class=”active”><a href=””>Home</a></li>
<li class=”dropdown”>
    <a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Tutorial
        <span class=”caret”></span></a>
            <ul class=”dropdown-menu”>
                  <li><a href=””>Membuat Email</a></li>
                <li><a href=””>Daftar di wordpress.com</a></li>
                  <li><a href=””>Kostumasi Bagian I</a></li>
                <li><a href=””>Kostumasi Bagian II</a></li>
                  <li><a href=”#”>Kostumasi Bagian III</a></li>
                <li><a href=”#”>Kostumasi Bagian IV</a></li>
            </ul>
  </li>
  <li><a href=””>Daftar Blog</a></li>
  <li><a href=””>Kirim Pertanyaan</a></li>
  <li><a href=””>FAQ</a></li>
</ul>

untuk perintah <li><a href=””>Daftar Blog</a></li> merupakan menu biasa, untuk menu yang memiliki submenu sebagai dropdown sebagai berikut:

<li class=”dropdown”>
    <a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Tutorial
        <span class=”caret”></span></a>
            <ul class=”dropdown-menu”>
                  <li><a href=””>Membuat Email</a></li>
                <li><a href=””>Daftar di wordpress.com</a></li>
                  <li><a href=””>Kostumasi Bagian I</a></li>
                <li><a href=””>Kostumasi Bagian II</a></li>
                  <li><a href=”#”>Kostumasi Bagian III</a></li>
                <li><a href=”#”>Kostumasi Bagian IV</a></li>
            </ul>
  </li>

fasilitas dropdown-toggle yang digunakan untuk memanipulasi tampilan