Selamat malam teman teman blogger, entah mengapa akhir akhir ini saya ketagihan menulis trik HTML dan CSS dan JS jadi tempat menulis yang paling pas untuk menyalurkannya ya di halaman editblogtema.
Kali ini saya ingin berbagi trik membuat menu navigasi blog full screen yang apabila menu di klik maka navigasi layar penuh akan muncul dari dari kiri ke kanan halaman blog kalian, lihat demo di bawah yang saya terapkan melalui opsi HTML:
Cara menerapkan-nya adalah sebagai berikut:
 |
| Buku panduan HTML |
Contoh menu dorong disamping
Klik elemen Menu hamburger (tiga garis titik tiga) dibawah berikut ini untuk membuka menu contoh blog di dalam kontainer menu merah .☰ Buka
- Masuk ke pengaturan blogger
- Pilih Tema
- Pada pengaturan template terbaru klik titik tiga ⋮
- Akan muncul menu seperti pada gambar:
- Klik atau pilih "Edit HTML"
- Pada halaman editor HTML yang telah terbuka cari kode penutup </head> dan letakan kode berikut tepat diatasnya:
<style>Selanjutnya masih di di dalam opsi editor HTML, kembali cari kode <body> kalau tiak ketemu kodenya bisa seperti ini: <body class='container'> atau jika tidak ketemu juga cari kembali kode </head> dan letakan kode berikut tepat di bawahnya:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #FF0000;
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: 28;
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>
<div id="mySidenav" class="sidenav">Selanjutnya cari kode penutup </body> dan letakan kode JS berikut tepat diatasnya:
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Perihal</a>
<a href="#">Layanan</a>
<a href="#">Produk</a>
<a href="#">kontak</a>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<script>Save template. Percayalah itu mudah, karena trik ini dapat diterapkan pada template bawaan versi tua dan yang terbaru.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>