Pada kesempatan kali ini saya ingin sharing cara membuat menu dropdown ketika di klik
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
0 comments: