√ Cara Membuat Navigasi Menjadi Sticky

Cara Membuat Navigasi Menjadi Sticky

Monday, November 27, 2017

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.

Bukan hanya pada menu navigasi, teknik sticky ini juga bisa diterapkan di widget yang lainnya seusai keinginan.

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:

Advertiser

- 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.