Catatan PHP

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

1 thought on “Membuat Dropdown Menu Vertikal dengan Bootstrap”

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s