KURAZONE ~ Semenjak hadirnya template Viomagz, banyak sekali kalangan Blogger yang mengganti template nya, salah satu yang menarik dari template tersebut adalah tampilan menu nya yang sederhana dan elegan, ditambah lagi bisa melayang ketika halaman blog di scroll kebawah. Meskipun tidak semua Blogger menggunakan template tersebut, tetap saja - melayangnya menu tersebut menarik perhatian dan banyak yang mencoba untuk menerapkannya.
Pada kesempatan kali ini kita akan mempelajari bagaimana cara membuat menu blog menjadi melayang ketika halaman blog di scroll.
Cara Membuat Menu Blog Melayang Ketika di Scroll
1. Buka akun Blogger2. Pilih Menu Tema
3. Masukkan kode dibawah ini kedalam template, taruh diatas kode </head>
<script async='' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>4. Masukkan kode dibawah ini kedalam template, taruh diatas kode </body>
<script type='text/javascript'>
$(document).ready(function() {
var stickyNavTop = $('#header-navigation').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#header-navigation').css({ 'position': 'fixed', 'top':0, 'z-index':9999, 'width':'100%' });
} else {
$('#header-navigation').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
Sebagai gambaran saja, bahwa tampilan HTML pada menu - memiliki bentuk struktur seperti dibawah ini : (nah - ID tersebutlah yang harus dimasukkan kedalam JavaScriptnya)
<nav id='header-menu'>
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</nav>
*nama ID atau CLASS yang dicontohkan mungkin akan berbeda-beda dengan template yang kalian gunakan, untuk itulah kalian perlu mengeksplor template nya agar menemukan ID/CLASS Menu yang akan disetting Melayang.
Itulah informasi mengenai "Cara Membuat Menu Blog Melayang Ketika di Scroll", selamat mencoba dan semoga bermanfaat. Goodluck !!