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”&gt;
    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

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s