Halo sobat blogger, bagaimana kabar kalian, mudah - mudahan kita semua diberi kesehatan panjang, panjang umur, serta murah rejekinya aamiin. Dalam kesempatan kali ini saya akan membagikan sebuah tutorial yang berjudul " Cara membuat menu according dengan HTML , CSS, dan Javascript" . Untuk teman - teman yang sudah advance mungkin bisa di skip aja tutorial ini. Untuk teman - teman yang baru belajar HTML, CSS, serta Javascript langsung saja ikuti langkah - langkah seperti dibawah ini.
Langkah pertama teman-teman silahkan buka text editor kesayangan kalian disini penulis menggunakan Visual Studio Code atau biasa disingkat dengan VSCode. Buat sebuah file dengan nama index.html atau terserah teman-teman memberi namanya.
1. Buatlah kerangka HTML nya seperti code dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara membuat menu according</title>
<style>
</style>
</head>
<body>
</body>
</html>
2. Setelah kerangka HTML nya dibuat kemudian tambahkan code seperti dibawah ini sisipkan diantara tag <body> </body> :
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
3. Kemudian tambahkan file css seperti pada code dibawah ini, disisipkan diantara tag <head> </head> :
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
4. Setelah menyisipkan file css tersebut, kemudian tambahkan file js (javascript) diatas tag </body> dengan code seperti berikut :
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
Adapun full source code nya adalah seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara membuat menu according</title>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
Setelah semua code nya di ketik kemudian simpan, dan buka pada browser maka akan menghasilkan seperti gambar berikut ini :
Source code nya data diunduh
disini.
Sekian tutorial kali ini, semoga bermanfaat. Jangan lupa tinggalkan komen, apabila ada pertanyaan.
Terimakasih, salam blogger.
No comments: