hasil pencarian Script Navigasi menu dropdown sederhana
kode membuat Script Navigasi menu dropdown sederhana terbaru!
Salin dan tempel kode script Script Navigasi menu dropdown sederhana ini di blog kamu,salin dantempel kode script untuk di pasang di blog atau website anda..
klik untuk menyalin
👇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dropdown Klik</title>
<style>
body {
font-family: sans-serif;
background: #f9f9f9;
padding: 50px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #3498db;
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 200px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
border-radius: 8px;
z-index: 1;
margin-top: 8px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown.show .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown" id="myDropdown">
<button class="dropdown-button" onclick="toggleDropdown()">Menu 🔽</button>
<div class="dropdown-content">
<a href="#">Beranda</a>
<a href="#">Tentang</a>
<a href="#">Kontak</a>
</div>
</div>
<script>
function toggleDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Tutup dropdown jika klik di luar menu
window.onclick = function(e) {
if (!e.target.matches('.dropdown-button')) {
let dropdown = document.getElementById("myDropdown");
if (dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
}
}
}
</script>
</body>
</html>
Komentar untuk Script Navigasi menu dropdown sederhana
Posting Komentar