Cara Membuat Simple Sidebar menu dengan Bootstrap 3

Sidebar menu merupakan elemen web yang bisa kita jumpai pada tampilan web saat ini, ciri khas pada menu ini adalah pada letaknya yang berada pada samping / sidebar website. Kita bisa mengaktifkan atau menonaktifkan sidebar menu dengan cara mengklik sebuah tombol menu yang tersedia. Nah, berbicara mengenai menu sidebar, apakah diantara kalian ada yang pernah membuat menu sidebar ? mungkin ada yang sudah dan ada juga yang belum pernah yah, Berikut ini akan saya share bagaimana cara membuat simple sidebar menu dengan Bootstrap 3. Bagi yang belum pernah silahkan ikuti langkah-langkah nya dengan baik dan bagi yang sudah pernah tidak ada salahnya untuk mencoba dan menambah referensi dalam mendesain tampilan menu.

Baik langsung saja, sebelumnya kalian wajib meload terlebih dahulu komponen bootstrap 3. Setelah semua terpenuhi, silahkan ketikan struktur HTML seperti berikut ini.

<div id="container">
<div id="sidebar">
    <ul class="sidebar-nav">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">Contact Us</a>
        </li>
    </ul>
</div>
<div id="page-content-container">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <h1>Halo Dunia</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
                <a href="#menu" class="btn btn-default" id="menu">Menu</a>
            </div>
        </div>
    </div>
</div>
</div>

Setelah mengetikan kode sperti diatas, selanjutnya, kita akan desain tampilan terlebih dahulu dengan CSS3 berikut ini.

#container {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#container.toggled {
    padding-left: 250px;
}

#sidebar {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #2c3e50;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#container.toggled #sidebar {
    width: 250px;
}

#page-content-container {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#container.toggled #page-content-container {
    position: absolute;
    margin-right: -250px;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #d35400;
    font-weight: bold;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background: #d35400;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}
.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
    font-weight: bold;
}

@media(min-width:768px) {
    #container {
        padding-left: 250px;
    }

    #container.toggled {
        padding-left: 0;
    }

    #sidebar {
        width: 250px;
    }

    #container.toggled #sidebar {
        width: 0;
    }

    #page-content-container {
        padding: 20px;
        position: relative;
    }

    #container.toggled #page-content-container {
        position: relative;
        margin-right: 0;
    }
}

Selanjutnya, kita akan tambahkan kode jQuery beserta library jQuery agar menu sidebar berjalan dengan baik.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#menu").click(function(e) {
          e.preventDefault();
        $("#container").toggleClass("toggled");
        });
    });
</script>

Jika semua kode diatas telah diketikan, selanjutnya simpan dilenya kemudian jalankan pada browser dan lihat hasilnya. Maka akan terlihat menu yang terletak disamping web, dan tombol menu yang dapat kalian klik untuk mengaktifkan atau menonaktifkan menu sidebarnya.

Baik cukup sekian tutorial bagaimana cara membuat simple sidebar menu dengan Bootstrap 3. Semoga bermanfaat dan selamat mencoba.

5 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