Membuat Sidebar dengan Bootstrap

Sidebar adalah salah satu fitur yang ada pada bootstrap. Buat kalian yang baru tahu, bootstrap adalah salah satu framework css yang membantu kalian sebagai developer untuk mempersingkat waktu dalam pengerjaan tampilan website. Karena tugas bootstrap adalah menyediakan class-class yang dibutuhkan untuk membuat tampilan website hanya cukup copy paste script dari framework dengan catatan sesuai dengan aturan permainanya.

Pada kali ini, kita akan mencoba membuat sidebar dengan bootstrap. Pada umumnya website memiliki navigasi dibagian atas website, dengan fitur sidebar akan merubah tampilan navigasi dengan menaruh menu tersebut ke sebelah kiri. Hasilnya seperti apa, kalian bisa ikuti langkah-langkah berikut ini. Buat file html dan salin code ini.

sidebar.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Simple Sidebar - Start Bootstrap Template</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link href="style.css" rel="stylesheet">

</head>

<body>

    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <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>
                        <p>Ini adalah contoh side bar</p>
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

</body>

</html>

Setelah sudah kalian bisa simpan file tersebut dengan format html. Untuk melihat hasilnya kalian bisa buka file tersebut pada browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

Tampilan diatas adalah tampilan awal, kalian bisa coba klik tombol tersebut untuk melihat sidebarnya.

Jika sudah kalian klik tombol tersebut, maka tampila sidebarnya akan muncul seperti gambar diatas.

Biasanya tampilan seperti ini digunakan untuk halaman admin, karena halaman admin lebih banyak menunya, dan juga kolom sebelah kanan akan terlihat lebih luas dan sangat cocok untuk halaman admin yang memiliki banyak kegiatan.

Sekian pembahasan mengenai bagaimana cara membuat sidebar dengan bootstrap. Semoga bermanfaat.