Membuat Animation Pada Menu

Setelah bergelut dengan pasukan script yang membuat mata saya cape dan otak saya sedikit berpikir alhasil dapat mendapatkan pencerahan alias hasil yang diinginkan dengan menerapkan pada blog ini. Awalnya saya iseng mencari model untuk ikon pada menu eh taunya tersangkut ke sebuah website w3schools .com yang dimana disitu adalah gudangnya bagi para pegiat belajar yang ingin belajar otodidak meski begitu tidak mengapa.

Kali ini saya akan memberikan bagaimana cara membuat menu atau navigation bar blog bisa bergerak alias ada efek animationnya seperti pada blog ini. Langsung saja kita belajar bersama-sama.
Contoh awal menu seperti ini
Menu Icon:

Untuk demo nya seperti ini 

Coba klik menu dibawah maka akan mnejadi "X":

Lalu selanjutnya kita menuju ke pembahasan awal.
Pertama anda membuat sebuah HTML
Contoh kode :

<div></div>
<div></div>
<div></div>

Kemudian anda tambahkan CSS untuk membuat menambahkan warna, ukuran, tinggi dan lebarnya suatu menu bar nya
Contoh kode :

div {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;}

Selanjutnya untuk membuat Ikon Animasinya kita gunakan CSS dan Javascript agar menu bar nya ada efeknya.
Contoh Kode :
1. Ini untuk membuat ikon bar nya saya mencoba dengan 3 baris

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

2. Tambahkan CSS

/* Animation Navigation Bar by Marwanzaen */
.container {
    display: inline-block;
    cursor: pointer;}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;}

Dan langkah yang terakhir anda tinggal masukan Javascript.
Contoh Kode :

<script>
function myFunction(x) {
    x.classList.toggle("change");
}
</script>




Nah disini sudah akan tampak hasil yang kita inginkan. Selanjutnya kita masukan kedalam template blog kita. Caranya :
1. Kode dibawah ini anda simpan dimana menu bar dibuat

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Misalnya awalnya begini :

 <div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<nav aria-label='Menu' id='site-navigation'>
<label aria-label="Menu" for="toggle-mobile-menu">Bla....Blaa...<./kode penutup>

Anda masukan kode diatas tersebut pada bagian teks Bla.. Bla....

2. Masukan kode dibawah tepat diatas ]]></b:skin>

/* Animation Navigation Bar by Marwanzaen */
.container {
    display: inline-block;
    cursor: pointer;}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;}

3. Anda tinggal masukan Javascript kode dibawah ini tepat diatas </head>

<script>
function myFunction(x) {
    x.classList.toggle("change");
}
</script>

Lalu anda Simpan dan lihat hasilnya. Seharusnya sampai disini hasil sudah selesai.
Selamt mencoba dan berkreasi.

Terima kasih anda telah membaca artikel Membuat Animation Pada Menu. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: