Cara Membuat Menu Navigasi Blog Menjadi Sticky

Sticky menu navigasi adalah sebuah menu blog atau website yang dibuat menjadi diam pada tempatnya. Fungsinya adalah ketika pembaca blog melakukan scrool mouse ke bawah dan ke atas, bagian yang di sticky akan tetap di tempat.

menu navigasi sticky

Bukan hanya pada menu navigasi, teknik sticky ini juga bisa diterapkan untuk elemen widget lainnya di blog, seperti styicky pada sidebar blog & header sticky, dan bisa juga widget yang lainnya seusai keinginan pemilik blog.

Untuk melihat hasil yang sudah saya buat, silahkan klik

DEMO

Berikut adalah langkah demi langkah membuat Sticky Menu Navigasi.

1. Perhatikan contoh CSS Menu Navigasi dan HTML Menu Navigasi berikut:

CSS Menu Navigasi

/* Menu */
.navi{clear:both;display:block;width:100%;font-family:'Roboto', sans-serif;padding:0;margin:0 auto 25px; z-index:9999!important;}.navi ul{background:#fff;margin:0 auto;padding:0;text-align:center;border-radius:5px}.navi li{display:inline-block;margin:15px 0}.navi li a{display:block;color:#000;font-weight:normal;padding:0 11px;font-size:18px;}.navi li a:hover{color:#86dfff !important}

Keterangan:
- Tulisan .navi yang berwarna biru diatas adalah bagian selector atau widget id yang akan dijadikan sticky.
- Tulisan z-index:9999!important; yang berwarna merah adalah kode css yang akan mengatur kerapian menu navigasi nantinya, supaya tetap rapi walaupun di zoom in-zoom out. maka tambahkan pada css navigasi di template blog anda.

HTML Menu Navigasi

<nav class='navi'>
<ul>
<li><a expr:title='data:blog.title' href='/' itemprop='url'>HOME></a></li>
<li><a href='#'>FACEBOOK</a></li>
<li><a href='#'>ADSENSE</a></li>
<li><a href='#'>BLOGGER</a></li>
<li><a href='#'>TWITTER</a></li>
</ul></nav>

Kode diatas hanya untuk memberikan pemahaman kepada anda bahwa yang akan dibuat sticky itu adalah menu navigasi di blog.

2. Copy dan pastekan script dibawah ini tepat diatas </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
var sticky_nav_offset_top = $('.navi').offset().top;
var sticky_nav = function(){
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_nav_offset_top) {
$('.navi').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('.navi').css({ 'position': 'relative' });
}
};
sticky_nav();
$(window).scroll(function() {
sticky_nav();
});
});
</script>

3. Ganti semua kode .navi dengan bagian atau widget id yang ingin dijadikan sticky.

Oke itulah sedikit tips dari blog ini tentang cara membuat menu navigasi di blog melayang saat di scrool atau sering di sebut sticky menu. Saya harap Anda paham dan berhasil menerapkannya di blog. terimakasih.