Cara Membuat Menu Navigasi Melayang


Cara Membuat Menu Navigasi Melayang - Menu navigasi adalah bagian yang sangat penting didalam sebuah blog atau website. Menu navigasi ini memiliki fungsi untuk mempemudah para pengunjung blog atau sebuah website untuk menelusuri apa yang berkaitan dengan yang sedang di cari.

Terkadang masih banyak juga pengunjung blog maupun website yang kesulitan dalam mencari atau menelusuri sebuah artikel di dalams sebuah blog/website.

Dengan membuat Menu Navigasi ini melayang akan mempermudah para pengunjung dalam menelusuri blog kita, selain itu dengan Navigasi yang melayang juga akan memberikan efek lebih elegan pada blog kita. Nah tertarik kan pastinya, berikut ini caranya:

1. Pertama masuk ke dasbor blogger sobat -> Theme -> Edit HTML, cari kode </body> jika sudah ketemu, pastekan kode di bawah ini.

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

2. Jangan lupa ganti kode digifree-menu diatas dengan ID navigasi sobat, misalnya seperti gambar dibawah ini:


3. Nah jika sobat ingin menunya melayang saat di scroll saja, maka kodenya seperti di bawah ini:


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

Sumber : Blog kangismet

0 Response to "Cara Membuat Menu Navigasi Melayang "

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel