Membuat Collapsible Sidenav Statis Bootstrap 3 part 1

Membuat Template Sidenav Statis Bootstrap 3
Karena pada bootstrap 3 dan juga bootstrap 4 sampai sekarang belum menyediakan plugin atau susunan class untuk layout sidebar, maka saat ini saya akan membagikan tentang cara untuk membuat template collapsible side nav yang nantinya side nav ini akan bersifat responsive. Baiklah teman-teman. Sekarang kita buat struktur html seperti berikut sebagai basic template bootstrap


<!DOCTYPE html>
<head>
    <title>Bootstrap 3 Collapsible Sidebar</title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>


    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- Bootstrap Js CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

 Sekarang kita akan membuat struktur utama yang akan menjadi sidebar dan konten nya seperti berikut

<div class="wrapper">

    <!-- Sidebar -->
    <nav id="sidebar">
        ...
    </nav>

    <!-- Page Content -->
    <div id="content">
        <!—Di isi dengan konten dummy -->
    </div>

</div>  

Selanjutnya kita akan menyusun sidebar dengan beberapa konten seperti beberapa navigasi dan juga ada menu dropdown.

<div class="wrapper">

    <nav id="sidebar">
        <!-- Sidebar Header -->
        <div class="sidebar-header">
            <h3>Collapsible Sidebar</div>
        </div>

        <!-- Sidebar Links -->
        <ul class="list-unstyled components">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>

            <li><!-- Link with dropdown items -->
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li><a href="#">Page</a></li>
                    <li><a href="#">Page</a></li>
                    <li><a href="#">Page</a></li>
                </ul>

            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

</div>


Membuat dropdown bekerja dengan baik, untuk membuat sebuah dropdown bisa bekerja dengan baik, data-toggle=”collapse” harus ditambahkan pada link yang memiliki dropdown, dan harus memiliki id untuk identifikasi id dropdown tersebut.

<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>

Kita juga boleh menambahkan attribute aria-expanded untuk menentukan dropdown tersebut akan terbuka secara default atau tidak.

Selanjutnya kita akan mengisi konten utama pada template ini. Disini kita hanya membuat sebuah tombol toggle yang akan menjadi trigger untuk memunculkan dan menyembunyikan sidebar yang telah kita buat.

<div id="content">
    <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
        <i class="glyphicon glyphicon-align-left"></i>
        Toggle Sidebar
    </button>
<div>

Baiklah, sampai disini kita sudah membuat struktur utama dari collapsible sidebar yang nantinya akan kita buat menjadi lebih rapih pada artikel selanjutnya. Demikian artikel tentang cara membuat collapsible sidebar bootstrap bagian 1. Semoga bermanfaat.

 

 

27 November 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat