CARA MEMBUAT MENU NAVIGASI HAMBURGER ANIMASI

CARA MEMBUAT MENU NAVIGASI HAMBURGER ANIMASI

Bicara soal menu navigasi pada blog, itu terlihat penting. Pada tema tema terbaru blogger di tahun 2019 saya melihat tampilan menu yang modern hingga yang sederhana. Namun mayoritas tema tema modern menggunakan menu bentuk hamburger atau garis bersusun tiga untuk membuka dan menutup menu navigasi terutama pada saat blog dibaca melalui ponsel.
sering dipakai untuk membuka menu navigasi mobile pada tema tema modern
Disini kami akan mencoba menjelaskan secara gamblang contoh pembuatannya. Namun tidak termasuk cara membuat link menunya karena hal tersebut akan kami tulis dalam artikel tersendiri pada lain kesempatan.

Perhatikan gambar diatas dan coba klik icon dibawah ini:








Coba klik Ikon hamburger dibawah ini dan dia akan berubah jadi "X":






Contohnay template yang sedang dipakai editblogtema sekarang ini apabila sobat buka atau akses melalui hape, prinsip pembuatannya juga sama walaupun telah modifikasi dengan css menurut selera kami sendiri,namun prinsip kerjanya tetap: SAMA.

Cara pembuatanannya cukup sederhana sebenarnya gak pakai ribet, baiklah kami jelaskan sebagai berikut:
Masuk kepengaturan blog pilih EditHTML dan cari kode <head>  seperti contoh dibawah letakan saja kode yang disorot warna kuning dibawahnya, lalu cari kode </body> dan leteakan saja kode yang saya sorot warna merah diatasnya.

<html>
<head>

<style>
.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);
}
</style>
</head>
<body>

Klik ikon hamburger untuk melihat dia berubah jadi "X":
<div class="container" onclick="myFunction(this)">
  <div class="bar1">
</div>
<div class="bar2">
</div>
<div class="bar3">
</div>
</div>

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

</body>
</html>

Itu mudah bukan? Lakukan sebagai latihan pada tema percobaan sobat, ini adalah langkah untuk membuat tema kita sendiri agar terlihat premium. Adapun cara menu muncul seperti yang kami singgung diatas akan kami tulis pada artikel terpisah....

Selamat ngeblog dan berakhir pekan!

Beri Komentar ya...

0 Comments