🧬 Cara Membuat Sidebar Menggunakan HTML, CSS, dan JavaScript

Sidebar adalah elemen navigasi yang sering digunakan pada website untuk menampilkan menu seperti Home, About, Services, atau Contact. Biasanya sidebar ditempatkan di sisi kiri atau kanan halaman dan dapat dibuat collapsible (bisa disembunyikan dan ditampilkan) agar tampilan website lebih dinamis.

Pada artikel ini, kita akan membuat sidebar responsif dengan HTML, CSS, dan JavaScript dari awal.

🧬 1. Struktur Dasar HTML

Buat file index.html dengan struktur berikut:

<!DOCTYPE html>

<head>

<title>Sidebar HTML CSS JS</title>

</head>

<body>

<h2 class="logo">MySidebar</h2>

<li><a href="#">📄 About</a></li>

<li><a href="#">🛠 Services</a></li>

<li><a href="#">📞 Contact</a></li>

</ul>

</aside>

<h1>Selamat Datang!</h1>

<p>Ini adalah contoh sidebar sederhana dengan HTML, CSS, dan JavaScript.</p>

</main>

</body>

</html>

🎨 2. Styling Sidebar dengan CSS

Buat file style.css dan tambahkan kode berikut:

/* Reset default */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

/* Layout dasar */

body {

display: flex;

height: 100vh;

overflow: hidden;

}

/* Tombol toggle */

.toggle-btn {

position: fixed;

top: 15px;

left: 15px;

font-size: 24px;

background: #111;

color: white;

border: none;

padding: 8px 12px;

border-radius: 5px;

cursor: pointer;

z-index: 1000;

}

/* Sidebar */

.sidebar {

width: 250px;

height: 100vh;

background: #111;

color: #fff;

padding: 20px;

transition: transform 0.3s ease;

}

.sidebar h2 {

text-align: center;

margin-bottom: 20px;

}

.menu {

list-style: none;

}

.menu li {

margin: 15px 0;

}

.menu a {

color: white;

text-decoration: none;

display: block;

padding: 10px;

border-radius: 5px;

transition: background 0.3s;

}

.menu a:hover {

background: #333;

}

/* Konten utama */

.content {

flex: 1;

padding: 40px;

background: #f4f4f4;

}

/* Sidebar tertutup */

.sidebar.closed {

transform: translateX(-100%);

}

⚙️ 3. Tambahkan Interaksi dengan JavaScript

Buat file script.js:

const toggleBtn = document.getElementById('toggle-btn');

const sidebar = document.getElementById('sidebar');

toggleBtn.addEventListener('click', () => {

sidebar.classList.toggle('closed');

});

Kode di atas akan menambahkan atau menghapus class .closed pada sidebar setiap kali tombol ☰ diklik.

📱 4. Tambahkan Responsif (Opsional)

Tambahkan ke style.css agar sidebar lebih baik di layar kecil:

@media (max-width: 768px) {

.sidebar {

position: fixed;

top: 0;

left: 0;

z-index: 999;

}

.content {

padding: 20px;

}

🎉 Hasil Akhir

Ketika dijalankan:

Sidebar muncul di sisi kiri.
Tombol ☰ dapat menyembunyikan atau menampilkan sidebar.
Tampilan tetap rapi di layar besar maupun kecil.

🧠 Tips Tambahan

Kamu bisa mengganti ikon ☰ dengan ikon dari Font Awesome.
Tambahkan animasi atau efek box-shadow agar tampak lebih modern.
Sidebar ini bisa dikembangkan menjadi dashboard admin atau menu navigasi aplikasi web.

🧬 Cara Membuat Sidebar Menggunakan HTML, CSS, dan JavaScript