Cara Membuat Sidebar Sederhana dengan Bootstrap

Halo, ketemu lagi dengan saya 🙂 , kali ini saya akan berbagi tutorial tentang bagaimana Cara Membuat Sidebar Sederhana Dengan Bootstrap, berikut langkah-langkahnya.

Langsung saja, silahkan kalian ketikan kode HTML berikut pada index bootstrapnya.

<div id="wrapper">

  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <div class="brand">Network Status</div>
      <li class="sidebar-brand">
        <a href="#">Start Bootstrap</a>
      </li>
      <li>
        <a href="#">Dashboard</a>
      </li>
      <li>
        <a href="#">Shortcuts</a>
      </li>
      <li>
        <a href="#">Overview</a>
      </li>
      <li>
        <a href="#">Events</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Services</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <h1>Simple Sidebar</h1>
          <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
        </div>
      </div>
    </div>
  </div>
</div>

Setelah itu, kita akan sedikit menghias dengan kode CSS3 berikut.

.brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }

Terakhir, kita akan buat fungsi toggle untuk menampilkan sidebarnya dengan kode Javascript berikut.

  // <!-- Menu Toggle Script -->
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

Kalo sudah semua, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Selesai.

Baik itu tadi tutorial Cara Membuat Sidebar Sederhana Dengan Bootstrap, semoga bermanfaat, sampai ketemu di tutorial selanjutnya.

Selamat mencoba 🙂