Seringkali menu membuka dan menutup Navigasi pada blogger di sebut sebagai Hamburger menu, memang sih tidak mirip sama hamburger malahan lebih mirip garis garis bersusun tiga atau tiga garis bersusun, beneran tapi yang kita bicarakan adalah perihal pembuatannya dengan kode kode sbb:
- CSS
- HTML
- JavaScript
- Pilih Tema
- Pilih Edit HTML
1. Tambahkan CSS
Pada halaman editor HTML cari kode </head> lalu tambahkan kode berikut tepat diatasnya:<style>
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: blue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
2. Tambahkan HTML
Masih pada halaman editor HTML cari kode <body> pada template terbaru (contempo dkk) atau <body expr:class='"loading" + data:blog.mobileClass'> pada template tua atau yang lebih lama. Dan tambahkan kode berikut diatas atau dibawah salah satu dari dua kode tersebut.<div class="sidenav" id="mySidenav">Petunjuk:
<a class="closebtn" href="javascript:void(0)" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<span onclick="openNav()" style="cursor: pointer; font-size: 30px;">☰Buka</span>
</div>
Robah tanda pagar '#" dengan link blog sobat sendiri
Robah huruf yang berwarna merah dengan judul menu sobat sendiri.
3. Tambahkan JavaScript
Terakhir cari kode </body> dan tambahkan kode berikut tepat diatasnya:<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
4. Save Tema
Selamat mencoba.
Mas kalo yang udh ada menu, trus pengen diganti sama menu gini ada caranya?
BalasHapusTidak ada masalah sebenarnya. Hanya saja kadang peletakan bagian HTML harus di coba coba, karena bisa membuat menu yang sudah ada posisinha turun kebawah.
HapusMaka sebaiknya bagian HTML di coba coba letakan ke bagian atas atau bawah tag body.
Sementara CSS dan JS tetap seperti penjelasan di atas.
Sebaiknya gunakan sidebar dari tutorial kami terbaru, karena animasinya bisa saja terkesan patah patah pada beberapa jenis template.