Cara Gampang Membuat Menu Navigasi Melayang Saat di Scroll

Al Maz Bos - Menu Navigasi (Navigation Menu) adalah menu pada blog atau website yang biasanya berada di deretan Home , About , Discla...

Al Maz Bos - Menu Navigasi (Navigation Menu) adalah menu pada blog atau website yang biasanya berada di deretan Home, About, Disclaimer, Sitemap dan seterusnya. Menu navigasi ini sangat berperan penting bagi pengunjung agar memudahkannya untuk berselancar pada situs kita tentunya.

Pernah kah anda melihat pada situs tertentu saat halamannya kita scroll ke bawah menu navigasinya tetap melayang diatas? Tentu lebih memudahkan kita bukan dalam berselancar di situs tersebut? Contohnya facebook, pinterest, google+ dan masih banyak lagi. Nah, pada kali ini kita akan coba cara membuat menu navigasi yang melayang seperti yang diterapkan situs-situs tersebut.

Caranya cukup simple, kita hanya perlu mengambil kodenya saja dan memasangnya pada situs kita agar Menu Navigasi Tetap Melayang Saat Halaman Discroll. Ikuti langkah dibawah ini.

Cara Gampang Membuat Menu Navigasi Melayang Saat di Scroll

• Masuk ke Blogger > Masuk ke menu Template > Edit HTML
• Cari dengan cara "CTRL+F" kode </body>
• Salin kode berikut ini dan pasang tepat di atas kode </body>

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

• Sebelum anda "Save", Ubah terlebih dahulu elemen .nav2 dengan eleman/kode yang menjadi Navigasi Menu pada situs anda, setelah itu baru "Save".

Seperti itulah cara membuat menu navigasi tetap muncul (melayang) ketika di scroll, mudah bukan? Jika ada kesulitan anda bisa bertanya melalui kolom komentar dibawah, jangan lupa tinggalkan jejak anda dikomentar dan share ke teman-teman anda. Selamat mencoba...