Pelajari cara membuat menu navigasi sidebar yang responsif dengan CSS
Contoh
< a href="//dosenit.com/html/tutorial-html"html/a> body { margin: 0; font-family: "Lato", sans-serif; } .sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } .sidebar a { display: block; color: black; padding: 16px; text-decoration: none; } .sidebar a.active { background-color: #4CAF50; color: white; } .sidebar a:hover:not[.active] { background-color: #555; color: white; } div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } @media screen and [max-width: 700px] { .sidebar { width: 100%; height: auto; position: relative; } .sidebar a {float: left;} div.content {margin-left: 0;} } @media screen and [max-width: 400px] { .sidebar a { text-align: center; float: none; } }Home News Contact AboutContoh Sidebar Responsif
Contoh ini menggunakan kueri media untuk mengubah sidebar menjadi top navigation bar saat ukuran layar 700px atau kurang.
Kami juga telah menambahkan kueri media untuk layar yang berukuran 400px atau kurang, yang akan menumpuk dan memusatkan link navigasi secara vertikal.
Ubah ukuran jendela browser untuk melihat efeknya.
Bagian Artikel
Membuat Sidebar yang Responsif
Langkah 1] Tambahkan HTML
Contoh
_Home News Contact About..
Langkah 2] Tambahkan CSS
Contoh
/* Menu navigasi samping */ .sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } /* link Sidebar */ .sidebar a { display: block; color: black; padding: 16px; text-decoration: none; } /* link Active/current */ .sidebar a.active { background-color: #4CAF50; color: white; } /* Link pada mouse-over */ .sidebar a:hover:not[.active] { background-color: #555; color: white; } /* Halaman konten. Nilai properti margin-left harus sesuai dengan nilai properti lebar sidebar */ div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } /* Pada layar yang lebarnya kurang dari 700px, buat sidebar menjadi topbar */ @media screen and [max-width: 700px] { .sidebar { width: 100%; height: auto; position: relative; } .sidebar a {float: left;} div.content {margin-left: 0;} } /* Pada layar yang berukuran kurang dari 400 piksel, tampilkan bar secara vertikal, bukan horizontal */ @media screen and [max-width: 400px] { .sidebar a { text-align: center; float: none; } }
Bagaimana caranya
Saat ini sudah banyak contoh sidebar yang bisa anda copy baik menggunakan bootstrap maupun tidak menggunakan bootstrap. Namun jika penasaran, artikel ini bisa membantu Anda untuk membuat sidebar versi Anda sendiri
Pada kesempatan kali ini kita akan membuat sidebar sederhana yang bisa di toggle. Karena bisa toggle disini kita akan menggunakan sedikit javascript. Saya akan memberikan kode sumber yang mudah dipahami untuk Anda semua. Silahkan scroll ke bawah untuk melihat hasil akhirnya
Cara Membuat Bootstrap Sidebar1. Buat file baru dengan nama index. html di tempat yang Anda inginkan. Kemudian salin skrip di bawah ini dan jalankan di browser
Bootstrap Demo SuperVideo Dashboard Populer News Sports Music Film Bookmark Lorem Ipsum 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?
Jika dijalankan, maka tampilan desain akan terlihat seperti di bawah ini. Tampilan dibawah ini masih sangat berantakan, untuk itu kita perlu menambahkan css agar sidebar berada di posisi kiri
2. Salin skrip css di bawah ini dan tempelkan di atas tag .
_
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; }
3. Saat script di atas dijalankan lagi, sidebar sudah tidak terlihat lagi. Untuk membuatnya terlihat dan tertutup [toggle] maka kita perlu menambahkan javascript. Silahkan copy paste script dibawah ini sebelum tag
// 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"]; }];
Kami telah melakukan semua langkah. Saatnya mencoba lagi. Anda bisa melihat hasilnya seperti pada gambar di bawah ini
Skrip Lengkap
_
Bootstrap 5 Side Bar Navigation 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; } SuperVideo Dashboard Populer News Sports Music Film Bookmark Lorem Ipsum 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? // 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"]; }];
Wah keren bukan?, setelah anda mengetahui cara membuat sidebar toogle, saatnya anda berimprovisasi agar sidebar anda terlihat semakin cantik. Ikuti tutorial saya yang lain di link berikut
Baca Artikel Lainnya ✨📰 1. Cara Cepat Membuat Sidebar dengan Bootstrap baca selengkapnya📰 2. Membuat Bilah Gulir Kustom yang Cantik dengan CSS baca lebih lanjut📰 3. Membuat Bootstrap Navbar Bawah Seperti di Aplikasi Seluler baca lebih lanjut
Ok sekian dulu tutorial cara cepat membuat sidebar dengan bootstrap. Semoga bermanfaat. Jika ada yang ingin didiskusikan, silahkan diskusikan di kolom komentar di bawah. Demikian dan terima kasih