Cara Membuat Animated Menu Icon Hamburger

Hanya orang-orang dengan hati damailah yang boleh menerima kejadian buruk dengan lega. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Animated Menu Icon Hamburger.

Pernah melihat menu Icon Hamburger dengan animasi-animasi yang bervariasi? Nah disini saya akan memberitahukan kepada kalian tentang bagaimana Cara Membuat Animated Menu Icon Hamburger. Berikut cara nya:

Seperti biasa, pertama-tama siapkan file index.html nya.

Kemudian, isi di bagian <body> tag-tag HTML berikut.

<p>Click on the Menu 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>

Selanjutnya, isi untuk 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? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Animated Menu Icon Hamburger.

Semoga bermanfaat, terima kasih

Cara Membuat Animated Menu Icon Hamburger

Kategori