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.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.
Kodenya adalah:
CSS
Di dalam template letaknya di atas tag penutup </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>
HTML
Di dalam template letaknya di bawah tag pembuka <body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Javascript
Di dalam template letakannya di atas tag penutup </body>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
Lihat DEMO
Bagaimana mudah bukan?