Cara Membuat Menu Navigasi Blog Melayang Saat Halaman Discroll

Oleh: Unknown

Saturday 24 January 2015

Bagikan :

Tweet

DETIKREVOLUSI.com - Pada kesempatan kali ini, saya akan mencoba berbagi tutorial Cara Membuat Menu Navigasi Blog Melayang Saat Halaman Discroll. Sebelumnya, saya jelaskan terlebih dahulu apa itu menu navigasi.

Menu Navigasi adalah sebuah fasilitas yang diberikan oleh pemilik blog/website untuk memudahkan pengunjung dalam menjelajah setiap isi blog/website. Mudahnya, ketika pengunjung ingin mencari sebuah kategori yang tersedia di dalam website, pengunjung cukup mencari pada menu yang telah disediakan oleh pemilik blog/website.

Mungkin Anda yang memiliki blog/website bosan dengan bentuk atau arsitektur menu navigasi pada blog/website Anda, jadi tidak ada salahnya untuk mencoba membuat menu navigasi Anda menjadi melayang saat halaman discroll. Tanpa berlama-lama, silahkan ikuti langkah-langkah yang akan saya berikan :

1. Template > Edit HTML
2. Cari (CTRL+F) </body>
3. Copy kode berikut ini dan paste di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('.nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Sebelum klik "Save", jangan lupa ganti elemen .nav dengan elemen/kode yang menjadi navigasi menu blog Anda. Misalnya pada template (New Johny Wuss), kodenya bernama #menu, sehingga kodenya menjadi seperti ini :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menu').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Bagi Anda yang menggunakan tempalte (New Johny Wuss), dan ingin membuat menu navigasi blog Anda menjadi melayang saat halaman discroll, tinggal copy-paste saja kode yang saya berikan di atas. Tapi jangan lupa, ubah angka 99% di bagian #menu{background:#343434;width:99%;margin:0 5px 0 5px;color menjadi 950px.

• Demo

Tag : Tutorial