Cara Membuat Animated Menu Icon Hamburger
Hanya orang-orang dengan hati damailah yang boleh menerima kejadian buruk dengan lega. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Animated Fitur Icon Hamburger.
Pernah melihat fitur Icon Hamburger dengan animasi-animasi yang bervariasi? Nah disini saya akan memberitahukan kepada kalian mengenai bagaimana Cara Membangun Animated Fitur Icon Hamburger. Berikut cara nya:
Seperti lazimnya, pertama-tama siapkan file index.html nya.
Kemudian, isi di bagian <body> tag-tag HTML berikut.
<p>Click on the Fitur Icon to transform it to X:</p>
<div class=container onclick=myFunction(this)>
<div class=bar1></div>
<div class=bar2></div>
<div class=bar3></div>
</div>
Berikutnya, isi bagi CSS nya.
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}Dan yang terakhir, bagian Javascript nya.
<script>
function myFunction(x) {
x.classList.toggle(change);
}
</script>
Bagaimana teman-teman? Lumayan gampang bukan?
Sekianlah bagi panduan kali ini mengenai Cara Membangun Animated Fitur Icon Hamburger.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
