Cara Cepat Membuat Sidebar dengan Bootstrap

Share:
Cara Cepat Membuat Sidebar dengan Bootstrap
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat sidebar keren dengan menggunakan bootstrap. Penasaran?, ayo ikuti selengkapnya di bawah ini.



Saat ini banyak sekali contoh-contoh sidebar yang bisa kalian tiru baik menggunakan bootstrap atau tidak menggunakan bootstrap. Tapi jika kalian penasaran, artikel ini bisa membantu kalian untuk membuat sendiri sidebar versi kalian.

Pada kesempatan kali ini kita akan membuat sidebar sederhana yang bisa di-toggle. Karena bisa di-toggle disini kita akan menggunakan sedikit javascript. Saya akan memberikan source code yang mudah dipahami bagi kalian semua. Silahkan scroll ke bagian paling bawah untuk melihat hasil akhirnya.



Cara Membuat Sidebar Bootstrap

1. Buatlah sebuah file baru dengan nama index.html di tempat yang kalian inginkan. Lalu copy script di bawah ini dan jalankan di browser.
    
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap Demo</title> <!-- bootstrap 5 css --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" /> </head> <body> <div> <div class="sidebar p-4 bg-primary" id="sidebar"> <h4 class="mb-5 text-white">SuperVideo</h4> <li> <a class="text-white" href="#"> <i class="bi bi-house mr-2"></i> Dashboard </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-fire mr-2"></i> Populer </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-newspaper mr-2"></i> News </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-bicycle mr-2"></i> Sports </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-boombox mr-2"></i> Music </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-film mr-2"></i> Film </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-bookmark mr-2"></i> Bookmark </a> </li> </div> </div> <section class="p-4" id="main-content"> <button class="btn btn-primary" id="button-toggle"> <i class="bi bi-list"></i> </button> <div class="card mt-5"> <div class="card-body"> <h4>Lorem Ipsum</h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque animi maxime at minima. Totam vero omnis ducimus commodi placeat accusamus, repudiandae nemo, harum magni aperiam esse voluptates. Non, sapiente vero? </p> </div> </div> </section> </body> </html>


Jika kalian jalankan, maka tampilan desainnnya akan tampak seperti di bawah ini. Tampilan di bawah ini masih sangat berantakan, untuk itu kita perlu menambahkan css agar sidebar berada di posisi kiri.

Membuat Sidebar dengan Bootstrap
Tampilan Tanpa CSS




2. Copy script css di bawah ini dan paste di atas tag </head>.


<style>     li {     list-style: none; margin: 20px 0 20px 0; } a {     text-decoration: none; } .sidebar { width: 250px; height: 100vh; position: fixed; margin-left: -300px; transition: 0.4s; } .active-main-content { margin-left: 250px; } .active-sidebar { margin-left: 0; } #main-content {     transition: 0.4s; } </style>


3. Saat script di atas dijalankan kembali, maka sidebar sudah tidak terlihat. Untuk membuatnya dapat terlihat dan ditutup(toggle) maka kita perlu menambahkan javascript. Silahkan copy dan paste script di bawah ini sebelum tag </body>


<script>     // event will be executed when the toggle-button is clicked document.getElementById("button-toggle").addEventListener("click", () => {     // when the button-toggle is clicked, it will add/remove the active-sidebar class     document.getElementById("sidebar").classList.toggle("active-sidebar"); // when the button-toggle is clicked, it will add/remove the active-main-content class document.getElementById("main-content").classList.toggle("active-main-content");     }); </script>


Semua tahapan sudah kita jalankan. Saatnya kita uji coba kembali. Hasilnya bisa kalian lihat seperti gambar di bawah ini.
Bootstrap Sidebar
Hasil Akhir




Script Lengkap 



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap 5 Side Bar Navigation</title> <!-- bootstrap 5 css --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous" /> <!-- custom css --> <!-- <link rel="stylesheet" href="style.css" /> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" /> <style> li { list-style: none; margin: 20px 0 20px 0; } a { text-decoration: none; } .sidebar { width: 250px; height: 100vh; position: fixed; margin-left: -300px; transition: 0.4s; } .active-main-content { margin-left: 250px; } .active-sidebar { margin-left: 0; } #main-content { transition: 0.4s; } </style> </head> <body> <div> <div class="sidebar p-4 bg-primary" id="sidebar"> <h4 class="mb-5 text-white">SuperVideo</h4> <li> <a class="text-white" href="#"> <i class="bi bi-house mr-2"></i> Dashboard </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-fire mr-2"></i> Populer </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-newspaper mr-2"></i> News </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-bicycle mr-2"></i> Sports </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-boombox mr-2"></i> Music </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-film mr-2"></i> Film </a> </li> <li> <a class="text-white" href="#"> <i class="bi bi-bookmark mr-2"></i> Bookmark </a> </li> </div> </div> <div class="p-4" id="main-content"> <button class="btn btn-primary" id="button-toggle"> <i class="bi bi-list"></i> </button> <div class="card mt-5"> <div class="card-body"> <h4>Lorem Ipsum</h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque animi maxime at minima. Totam vero omnis ducimus commodi placeat accusamus, repudiandae nemo, harum magni aperiam esse voluptates. Non, sapiente vero? </p> </div> </div> </div> <script> // event will be executed when the toggle-button is clicked document.getElementById("button-toggle").addEventListener("click", () => { // when the button-toggle is clicked, it will add/remove the active-sidebar class document.getElementById("sidebar").classList.toggle("active-sidebar"); // when the button-toggle is clicked, it will add/remove the active-main-content class document.getElementById("main-content").classList.toggle("active-main-content"); }); </script> </body> </html>

 

Wah keren gak?, setelah kalian tahu cara membuat sidebar toogle, saat nya kalian melakukan improvisasi agar sidebar yang kalian terlihat lebih cantik lagi. Ikuti tutorial saya yang lain di link berikut ini.

Baca Artikel Lain ✨
📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more
📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more
📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more


Ok, sekian tutorial cara cepat membuat sidebar dengan bootstrap. Semoga bermanfaat. Jika ada yang ingin didiskusikan silahkan didiskusikan di kolom komentar di bawah ini. Sekian dan terima kasih.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik