ZIELEITE | Tech Forever: Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

Pada tutoria blog kali ini saya akan membagikan code untuk blog agar blog/website kita menampilkan menu ketika di scroll.

Menu Navigasi (Navigation Menu) yaitu menu blog yang biasa ada di deretan Home, About, dan seterusnya. Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah "berselancar" (surf) dan "baca-baca" (browse) blog kita lebih lama.

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

1. Template > Edit HTML

2. Cari (CTRL+F) kode </body>

3. Copy kode berikut ini dan Paste di atas 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>
4. Sebelum klik "Save", Ganti elemen #menu dengan elemen/kode yang menjadi Navigasi Menu blog Anda. Di blog saya ini, kodenya bernama #menu-wrapper.

Note: Jika ada yang ingin ditanyakan silahkan tulis dikomentar...Terima Kasih.

0 Response to "Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll"

Posting Komentar