Floating Menu - Navigasi Menu Statis yang Tetap Muncul

Baca Juga

Cara Membuat Floating Menu - Navigasi Menu Statis yang Tetap Muncul saat Halaman Blog Discroll ke Bawah.

Floating Menu --disebut juga Static Menu, Fixed Menu, dan Sticky Menu-- adalah menu melayang, yaitu navigasi menu blog  yang tetap muncul saat halaman blog discroll ke bawah.

Demonya seperti di blog ini. Silakan scroll ke bawah, maka navigasi menu tetap ada dibagian teratas halaman blog.

Fungsi Floating Menu ini adalah memudahkan pengunjung menemukan menu konten blog kita, baik berupa halaman statis maupun kategori (label) atau link eksternal.

Floating Menu menjadi salah satu trend desain web modern yang membuat blog menjadi ramah pengguna (user friendly), sebagaimana halnya tombol kembali ke atas (back to top button) yang pemasangannya sudah dishare di sini.

Sebetulnya CB sudah share kode atau cara memasang menu statis ini. Posting ini hanya update dan lebih detail.

Cara Memasang Floating Menu

1. Template > Edit HTML
2. Tinggal pasang (copas) kode Javascript berikut ini 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>

3. Perhatikan kode warna merah (#menu). Itu adalah kode navigasi menu Anda. Masing-masing template bisa berbeda.

Di template ini, kode navigasi menunya #menu. Di blog Anda mungkin saja sama, bisa juga berbeda, misalnya .menu, #navmenu, .main-menu, atau apalah. Cek saja dengan cara:

- Arahkan cursor ke menu blog Anda
- Klik kanan dan klik "inspect element"
- Kode pembungkus navigasi menu akan terlihat di kolom kanan

4. Save!

Pastikan di template blog Anda sudah ada kode jQuery. Jika belum ada, silakan pasang di atas kode </head> (Baca: Cara Pasang kode jQuery).

Demikian cara membuat  Navigasi Menu Statis yang Tetap Muncul saat Halaman Blog Discroll ke Bawah. Good Luck & Happy Blogging! (http://www.contohblog.com).*