Code, Create, Innovate: Welcome to Programmer World Code, Create, Innovate: Welcome to Programmer World
Cara Membuat Menu dengan HTML, CSS, dan JavaScript
Menu navigasi adalah elemen penting dalam sebuah website untuk membantu pengguna menjelajahi halaman dengan mudah. Artikel ini menjelaskan langkah-langkah membuat menu navigasi dengan dropdown menggunakan HTML, CSS, dan JavaScript.
1. Membuat Struktur HTML
Langkah pertama adalah membuat struktur HTML untuk menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Navigasi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Services</a>
<ul class="dropdown-menu">
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>
2. Menambahkan Gaya dengan CSS
Gunakan CSS untuk memberikan gaya pada menu dan dropdown:
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.menu li {
position: relative;
}
.menu li a {
display: block;
color: white;
padding: 14px 20px;
text-decoration: none;
transition: background-color 0.3s;
}
.menu li a:hover {
background-color: #575757;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #333;
list-style-type: none;
margin: 0;
padding: 0;
min-width: 150px;
}
.dropdown-menu li a {
padding: 10px 20px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
3. Menambahkan Interaktivitas dengan JavaScript
Tambahkan JavaScript untuk memastikan dropdown berfungsi dengan baik, terutama pada perangkat layar sentuh.
// script.js
document.addEventListener('DOMContentLoaded', function() {
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
dropdownToggles.forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
const menu = this.nextElementSibling;
menu.classList.toggle('show');
});
});
});
4. Tips Desain Responsif
Untuk desain responsif, gunakan media queries di CSS:
@media (max-width: 768px) {
.menu {
flex-direction: column;
}
.dropdown-menu {
position: static;
display: none;
}
.dropdown:hover .dropdown-menu {
display: none;
}
.dropdown .dropdown-menu.show {
display: block;
}
}
Kesimpulan
Dengan HTML, CSS, dan JavaScript, Anda dapat membuat menu navigasi yang menarik dan fungsional. Dropdown menu membantu meningkatkan pengalaman pengguna dengan menyediakan akses cepat ke subkategori atau halaman lain.
Gambar: Ilustrasi Menu Navigasi
