Cara membuat Sticky menu Navigasi di blog

Cara membuat Sticky navigasi menu di blog - Stiky navigasi menu adalah sebuah menu website atau blog yang di kunci pada tempatnya, sehingga ketika kita scroll kebawah menu navigasi akan mengikuti atau tidak akan hilang.

Banyak sekali blog/website menambahkan fungsi navigasi menu ini agar tetap terlihat di bagian atas. Ketika pengguna menggulirkan mouse ke bawah halaman dan bagian atas menu navigasi tetap menempel dan tetap terlihat. Ini bermaksud untuk memudahkan kepada pengunjung dan tidak harus kembali menggerakan mousenya ke bagian atas untuk menjelajahi halaman yang lainnya.

Jika anda bingung dengan penjelasan saya tentang Stiky Navigasi menu , Lebih baik lihat saja blog saya atau gambar dibawah ini, lihat bagian menu navigasinya mengikuti kebawah ketika kita scroll !

Stiky Navigasi menu

Lalu bagaimana cara membuat navigasi stiky menu? Saya akan berbagi 2 Trik membuat Stiky menu navigasi. Ikuti saja tutorialnya dibawah, Berikut tutorial cara membuat stiky navigasi menu !

• Login dulu ke blog anda, kemudian ke Template dan EDIT HTML 
• Cari kode </body>  
• Copy kode berikut ini dan paste diatas kode </body> 

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

• Save template anda !

Jika trik diatas GAGAL , silakan anda gunakan trik dibawah ini !

• Login dulu ke blog anda, kemudian ke Template dan EDIT HTML 
• Cari kode </body>  
• Copy kode berikut ini dan paste diatas kode </body>

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('.nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya      
        if (scrollTop > stickyNavTop) {
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

• Save template anda !

Itulah tutorial cara membuat menu melayang setelah di scroll atau cara membuat sticky menu navigasi. Semoga bermanfaat !

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Related Articles :