Pelajari cara membuat menu navigasi sidebar yang responsif dengan CSS
Contoh
html>
scale=1.0">
Contoh 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
Langkah 1) Tambahkan HTML
Contoh
..
_
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
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat sidebar keren menggunakan bootstrap. Penasaran?, yuk ikuti detailnya di bawah ini
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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Demotitle>
<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/[email protected]/font/bootstrap-icons.css"
/>
head>
<body>
<div>
<div class="sidebar p-4 bg-primary" id="sidebar">
<h4 class="mb-5 text-white">SuperVideoh4>
<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 Ipsumh4>
<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 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
Penampilan Tanpa CSS
2. Salin skrip css di bawah ini dan tempelkan di atas tag .
<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 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
