Membuat Collapsible Sidenav Statis Bootstrap 3 part 2

Seperti yang kita bahas pada artikel sebelumnya yang berjudul Membuat Collapsible Sidenav Statis Bootstrap 3 yang merupakan bagian pertama dari artikel ini. Pada artikel tersebut kita sudah membuat sebuah struktur html dan class yang kita gunakan untuk membuat collapsible side nav statis. Sekarang ini kita akan memberikan style yang akan kita gunakan untuk memperbaiki tampilan agar lebih menarik.
Jika kalian belum membaca artikel saya sebelumnya bisa kalian klik tautan berikut

Membuat Collapsible Sidenav Statis Bootstrap 3 part 2

Sekarang kita akan memberikan style pada class .wrapper dengan memberikan display flex dan align item stretch.

.wrapper {
    display: flex;
    align-items: stretch;


Selanjutnya kita akan menentukan lebar sidebar dan juga kita akan membuat class active yang isinya adalah margin left negative sebesar ukuran lebar sidebar.


#sidebar {
    min-width: 250px;
    max-width: 250px;
}

#sidebar.active {
    margin-left: -250px;
}

 

Kita juga berikan tinggi pada sidebar agar sidebar tersebut memiliki ukuran tinggi 100% atau mengisi tinggi satu halaman..
Kita juga memberikan style pada expandable dropdown pada menu navigasi berdasarkan value dari property aria-expanded


a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}

a[aria-expanded="true"]::before {
    content: '\e260';
}

Selanjutnya kita akan buat side nav ini menjadi responsive dengan menyembunyikan class active ketika ukuran dibawah 768px
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
}


CSS STYLING
Berikut ini adalah styling untuk merapihkan tampilan dari hasil yang sudah jadi.

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar {
    /* don't forget to add all the previously mentioned styles here too */
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}
ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

Yang terakhir adalah kita akan mengaktifkan toggle yang telah kita buat dengan baris javascript berikut.

$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

});

Baiklah teman-teman, demikian artikel yang membahas tentang cara membuat collapsible side nav dengan bootstrap 3. 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