Bootstrap merupakan salah satu framework CSS terpopuler yang digunakan untuk membangun tampilan website yang responsif dan mudah dibuat. Salah satu fitur yang sangat berguna dalam Bootstrap adalah sidebar. Sidebar atau panel samping merupakan fitur yang dapat menampilkan menu navigasi, tautan sosial media, atau bahkan daftar kategori atau produk dalam sebuah website.
Dalam artikel ini, kita akan membahas cara membuat sidebar dengan Bootstrap. Berikut adalah beberapa langkah untuk membuat sidebar dengan Bootstrap:
- Siapkan struktur HTML Pertama, kita perlu membuat struktur HTML untuk sidebar. Di dalam elemen <div> dengan kelas "sidebar", tambahkan beberapa elemen <ul> untuk menampilkan daftar menu navigasi, tautan sosial media, atau daftar kategori atau produk yang ingin ditampilkan.
html<div class="sidebar">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
</ul>
</div>- Tambahkan CSS Setelah membuat struktur HTML, kita perlu menambahkan CSS untuk mengatur tampilan sidebar. Bootstrap menyediakan kelas "fixed-top" dan "fixed-bottom" untuk menempatkan sidebar di bagian atas atau bawah halaman. Kita juga dapat menambahkan beberapa kelas CSS untuk menyesuaikan tampilan sidebar, seperti "bg-light" untuk memberi warna latar belakang, "p-4" untuk menambahkan padding, dan "rounded" untuk membuat sudut-sudutnya menjadi bulat.
html<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0; /* Mengatur padding top, right, bottom, left*/
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); /* Efek shadow untuk sidebar*/
}
.nav-link {
color: #333;
}
</style>- Tambahkan JavaScript Untuk membuat sidebar menjadi responsif, kita perlu menambahkan beberapa script JavaScript. Bootstrap menyediakan plugin "offcanvas" untuk membuat sidebar menjadi responsif. Kita dapat memanggil plugin ini dengan menambahkan kode JavaScript berikut:
html<script>
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
</script>- Tambahkan tombol untuk membuka sidebar Terakhir, kita perlu menambahkan tombol untuk membuka sidebar. Bootstrap menyediakan kelas "btn btn-primary" untuk membuat tombol berwarna biru. Kita dapat menambahkan atribut "data-bs-toggle" dan "data-bs-target" untuk menunjukkan bahwa tombol tersebut berfungsi untuk membuka sidebar.
html<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
Buka Sidebar
</button>
langkah keempat tersebut, sidebar akan terbuka saat tombol tersebut diklik. Tombol tersebut dapat ditempatkan di dalam elemen <header> atau <nav> di bagian atas halaman, sehingga mudah diakses oleh pengguna.
Berikut adalah contoh lengkap kode HTML untuk membuat sidebar dengan Bootstrap:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Sidebar dengan Bootstrap</title>
<!-- Memanggil library Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Membuat CSS untuk sidebar -->
<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.nav-link {
color: #333;
}
</style>
</head>
<body>
<!-- Tombol untuk membuka sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
Buka Sidebar
</button>
<!-- Struktur HTML untuk sidebar -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarLabel">Sidebar</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
</ul>
</div>
</div>
</body>
</html>Dalam contoh di atas, tombol untuk membuka sidebar ditempatkan di bagian atas halaman. Saat tombol tersebut diklik, sidebar akan muncul di sisi kiri halaman. Sidebar dapat ditutup dengan menekan tombol "x" di bagian atas sidebar atau dengan mengklik area di luar sidebar.
Dalam kesimpulannya, membuat sidebar dengan Bootstrap merupakan proses yang cukup mudah dan cepat. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat sidebar dengan mudah dan menambahkan daftar menu navigasi, tautan sosial media, atau daftar kategori atau produk dalam website Anda.
Komentar