Pendahuluan
Halo, teman-teman! Pada kesempatan kali ini, kita akan belajar cara membuat hamburger menu yang keren dan responsif untuk website kalian. Hamburger menu, yang dikenal dengan ikon tiga garis horizontal, adalah solusi populer untuk menyembunyikan atau menampilkan menu navigasi, terutama di perangkat mobile. Yuk, kita mulai!
Langkah-Langkah Membuat Button Toggle Hamburger Menu
1. Membuat Struktur HTML
Pertama-tama, kita perlu menyiapkan struktur HTML yang akan menjadi fondasi dari hamburger menu kita. Berikut adalah contoh struktur HTML-nya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="menu-toggle" id="menu-toggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav class="nav" id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>
2. Menambahkan CSS untuk Hamburger Menu
Selanjutnya, mari kita tambahkan CSS untuk mendesain tombol hamburger dan menu navigasi. Cobalah kode CSS berikut:
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: #fff;
}
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-toggle .bar {
width: 25px;
height: 3px;
background-color: #fff;
margin: 4px 0;
transition: 0.4s;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul li {
margin: 0 10px;
}
.nav ul li a {
color: #fff;
text-decoration: none;
}
@media (max-width: 768px) {
.menu-toggle {
display: flex;
}
.nav {
display: none;
flex-direction: column;
width: 100%;
background-color: #333;
}
.nav ul {
flex-direction: column;
width: 100%;
}
.nav ul li {
text-align: center;
padding: 10px 0;
border-top: 1px solid #444;
}
}
3. Menambahkan JavaScript untuk Fungsi Toggle
Sekarang, mari kita tambahkan JavaScript untuk mengaktifkan fungsi toggle pada hamburger menu. Berikut adalah kode JavaScript-nya:
// script.js
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.getElementById('menu-toggle');
const nav = document.getElementById('nav');
menuToggle.addEventListener('click', function() {
nav.classList.toggle('active');
});
});
Jangan lupa tambahkan CSS tambahan untuk mengubah tampilan menu saat aktif:
/* styles.css */
.nav.active {
display: flex;
}
Penutup
Nah, itu dia cara membuat button toggle hamburger menu yang responsif! Dengan langkah-langkah di atas, kalian sudah siap untuk menghadirkan pengalaman navigasi yang lebih baik di situs web kalian. Semoga tutorial ini bermanfaat dan selamat mencoba! Jika ada pertanyaan atau butuh bantuan lebih lanjut, jangan ragu untuk bertanya. ๐