Floating Menu --disebut juga Static Menu, Fixed Menu, dan Sticky Menu-- yaitu navigasi hidangan blog yang tetap muncul ketika halaman blog discroll ke bawah.
Demonya menyerupai di blog ini. Silakan scroll ke bawah, maka navigasi hidangan tetap ada dibagian teratas halaman blog.
Fungsi Floating Menu ini yaitu memudahkan pengunjung menemukan hidangan konten blog kita, baik berupa halaman statis maupun kategori (label) atau link eksternal.
Floating Menu menjadi salah satu animo desain web modern yang membuat blog menjadi ramah pengguna (user friendly), sesuai dengan yang halnya tombol kembali ke atas (back to top button) yang pemasangannya sudah dishare di sini.
Sebetulnya CB sudah share isyarat atau cara memasang hidangan statis ini. Posting ini khusus update dan lebih detail.
Cara dan metode Memasang Floating Menu
1. Template > Edit HTML2. Tinggal pasang (copas) isyarat Javascript berikut ini di atas isyarat </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 isyarat warna merah (#menu). Itu yaitu isyarat navigasi hidangan Anda. Masing-masing template dapat tidak sama.
Di template ini, isyarat navigasi menunya #menu. Di blog Anda mungkin saja sama, dapat juga tidak sama, contohnya .menu, #navmenu, .main-menu, atau apalah. Cek saja dengan cara:
- Arahkan cursor ke hidangan blog Anda
- Klik kanan dan klik "inspect element"
- Kode pembungkus navigasi hidangan akan terlihat di kolom kanan
4. Save!
Pastikan di template blog Anda sudah ada isyarat Cara dan metode Pasang isyarat jQuery).
Demikian cara menciptakan Navigasi Menu Statis yang Tetap Muncul ketika Halaman Blog Discroll ke Bawah. Good Luck & Happy Blogging! (http://www.contohblog.com).*
Sumber http://www.contohblog.com/
Floating Sajian - Navigasi Sajian Statis Yang Tetap Muncul
4/
5
Oleh
Unknown
