Cara mudah membuat sticky menu di blog - Saat kita berkunjung di website-website yang ada di Internet, pasti kita menemukan beberapa navigasi yang melayang saat scroll mouse..
Intinya, saat posisi layar berada di paling atas (menampilkan header sebuah website) posisi navigasi terlihat seperti pada umumnya. Namun saat kita ingin melihat tampilan website yang lebih kebawah (scroll mouse), navigasinya menjadi melayang alias tidak ikut hilang seperti bagian-bagian lain. Menu seperti ini disebut sticky menu. Contoh mudahnya bisa dilihat di blog ristofa.com ini.
Jika navigasi di blog kita ingin dibuat sticky menu, caranya mudah kok.
- copy kode java scrypt berikut ini. (blok dan tekan CTRL + C)
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#sticky-menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#sticky-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999, });
} else {
$('#sticky-menu').css({ 'position': 'relative', });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#sticky-menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#sticky-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999, });
} else {
$('#sticky-menu').css({ 'position': 'relative', });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
- Buka menu template pada blog dan pilih edit template.
- Paste kan kode diatas sebelum tag </body> yang paling bawah..
- Ganti teks berwarna merah dengan kode css yang dipakai untuk navigasi diatas.
Jika ada kendala saat meng-aplikasikan kode diatas, silakan bertanya di kolom komentar.
No comments:
Post a Comment