Maksud judul diatas adalah menu hamburger yang gari garis bersusun tiga itu lho, saat disentuh dan menu postingan keluar hamburger menu berubah menjadi ikon 'close' (x), jadi sesuatu yang sangat familiar bagi pengunjung bukan? Lagipula trik animasi selalu lebih mampu menarik perhatian pengguna.
Anda bosan kan dengan tampilan menu blog yang itu ke itu saja, maka disini saya ingin membagikan sumber kode yang saya modifikasi dari halaman w3school. Jangan salah lho, w3school tidak memberikan kodenya begitu saja, kitalah yang harus kreatif memodifikasi, mengoah, meyusun dst. Hasilnya keren lho. Untuk kali ini saya tetap menggunakan template Essential sebagai kelinci percobaan:
Masuk ke pengaturan bloger (dasbor)
Pilih Menu
Pilih Edit HTML.
1. Langkah pertama.
Tambahkan kode ajax berikut dan letakan di atas kode tag penutup </head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
Setelah itu letakan kode berikut dibawah kode ajax tadi:
<style>@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
body {
font-family: 'Roboto', sans-serif;
color: #444444;
}
a {
color: #ff7013;
text-decoration: none;
}
.hamburger-menu-button {
width: 60px;
height: 60px;
padding: 6px;
display: block;
position: fixed;
margin-top: 35px;
z-index: 9999;
background: pink;
border: 5px solid white;
box-sizing: content-box;
border-radius: 50%;
text-indent: 100%;
color: transparent;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
outline: 0;
}
.hamburger-menu-button-open {
top: 50%;
margin-top: -1px;
left: 50%;
margin-left: -12px;
}
.hamburger-menu-button-open,
.hamburger-menu-button-open::before,
.hamburger-menu-button-open::after {
position: absolute;
width: 24px;
height: 2px;
background: #555;
border-radius: 4px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.hamburger-menu-button-open::before,
.hamburger-menu-button-open::after {
left: 0;
content: "";
}
.hamburger-menu-button-open::before {
top: 6px;
}
.hamburger-menu-button-open::after {
bottom: 6px;
}
.hamburger-menu-button-close {
background: transparent;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.hamburger-menu-button-close::before {
-webkit-transform: translateY(-6px) rotate(45deg);
transform: translateY(-6px) rotate(45deg);
}
.hamburger-menu-button-close::after {
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
}
.ham-menu {
position: fixed;
top: 72px;
left: 58px;
margin: auto;
max-width: 570px;
overflow: hidden;
z-index:999;
}
.ham-menu ul {
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
background-color: #fff;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.ham-menu.on ul {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.ham-menu ul {
font-size: 0;
}
.ham-menu ul li {
display: inline-block;
}
.ham-menu ul li:first-child .ham-menu ul li a {
padding-left: 30px;
}
.ham-menu ul li a {
padding: 15px;
display: block;
background-color: transparent;
color: #555;
text-transform: uppercase;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
font-size: 13px;
}
.ham-menu ul li.active a, .ham-menu ul li a:hover {
background-color: red;
color: #fff !important;
}
</style>
2. Langkah kedua
Masih di dalam pengaturan blogger di halaman Edit HTML, cari kode <body> dan letakan kode berikut di bawahnya:
<nav class='ham-menu' id='ham-navigation'>
<ul class='menu'>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Features</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
3. Langkah ketiga
Cari kode </body> dan letakan kode berikut tepat di atasnya:
<script>var button = document.getElementById('hamburger-menu'),
span = button.getElementsByTagName('span')[0];
button.onclick = function() {
span.classList.toggle('hamburger-menu-button-close');
};
$('#hamburger-menu').on('click', toggleOnClass);
function toggleOnClass(event) {
var toggleElementId = '#' + $(this).data('toggle'),
element = $(toggleElementId);
element.toggleClass('on');
}
// close hamburger menu after click a
$( '.menu li a' ).on("click", function(){
$('#hamburger-menu').click();
});
</script>
Save template.
Nenek gaptek seperti saya, bisa gak ya. ngikuti langkah-langkah yang diinstuksikan. Selamat sore, Mbak/Mas.
BalasHapusUrusan kode HTML untuk desain blog yang lebih kreatif blog ini pakarnya. Sukses selalu
BalasHapus