Assalamualaikum Wr. Wb.
Guys setelah sebelumnya saya posting hover dropdown, kali ini dropdown dengan effek ketika di klik. Simak yuk !
A. Pengertian
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.
B. 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.
C. Maksud dan Tujuan
Memberikan animasi pada waktu di klik.
D. Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.
E. Jangka Waktu
10 Menit
F. 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;
width: 200px;
}
li a:hover, .dropdow:hover .dropbtn {
background-color: red;
}
li.dropdow {
display: inline-block;
}
.dropdow-content {
display: none;
position: absolute;
background-color: blue;
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="#">Dropdown 1</a>
<a href="#">Dropdown 2</a>
<a href="#">Dropdown 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
G. Kesimpulan
Dropdown ini jika di klik maka akan memberikan efek.
H. Refrensi
www.w3schools.com
I. Penutup
Trimakasih telah menyimak postingan saya, Semoga bermanfaat.
Selamat mencoba dan selamat belajar. !
Wassalamualaikum Wr. Wb.
Guys setelah sebelumnya saya posting hover dropdown, kali ini dropdown dengan effek ketika di klik. Simak yuk !
A. Pengertian
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.
B. 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.
C. Maksud dan Tujuan
Memberikan animasi pada waktu di klik.
D. Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.
E. Jangka Waktu
10 Menit
F. 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;
width: 200px;
}
li a:hover, .dropdow:hover .dropbtn {
background-color: red;
}
li.dropdow {
display: inline-block;
}
.dropdow-content {
display: none;
position: absolute;
background-color: blue;
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="#">Dropdown 1</a>
<a href="#">Dropdown 2</a>
<a href="#">Dropdown 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
G. Kesimpulan
Dropdown ini jika di klik maka akan memberikan efek.
H. Refrensi
www.w3schools.com
I. Penutup
Trimakasih telah menyimak postingan saya, Semoga bermanfaat.
Selamat mencoba dan selamat belajar. !
Wassalamualaikum Wr. Wb.
Membuat Dropdown dengan Effek Klik Sederhana
Reviewed by Ainul_Arifin29
on
July 19, 2017
Rating:
Reviewed by Ainul_Arifin29
on
July 19, 2017
Rating:
No comments: