Hallo...
Semangat Pagi !
Setelah sebelumnya saya posting hover dropdown, kali ini dropdown dengan effek ketika di klik. Simak yuk !
Pengertian
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.
Latar Belakang
Dalam pembuatan web yang memiliki banyak konten, akan memakan banyak tempat, dan menjadikan menu terlihat berantakan karena tersusun tidak rapi. Dengan adanya dropdown, kita dapat menghemat tempan untuk menu, dan tampilan web kita tetap cantik dan rapi.
Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.
Tahap Pelaksanaan
1. Buka sublime text atau text editor lainnya.
2. salin atau tulis kode di bawah ini
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdow:hover .dropbtn {
background-color: red;
}
li.dropdow {
display: inline-block;
}
.dropdow-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdow-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdow-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">About</a></li>
<li class="dropdow">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
<div class="dropdow-content" id="myDropdow">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<script>
function myFunction() {
document.getElementById("myDropdow").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdow-content");
for (var d = 0; d < dropdows.length; d++) {
var openDropdow = dropdows[d];
if (openDropdow.classList.contains('show')) {
openDropdow.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
3. Simpan dengan nama mencoba.html
4. Buka di browser anda, dengan cara CTRL+O
Referensi
www.w3schools.com
Penutup
Trimakasih telah menyimak postingan saya, share dan like artikel ini. Join blog saya kawan klik disini.
Selamat mencoba dan selamat belajar. !
Apabila ada yang di tanyakan silahkan hubungi saya via sosmed :)
