Membuat Collapsible Sidenav Statis Bootstrap 3 part 2

27/11/2017    Maykhel David    1290    Website

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

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow