Membuat Menu Melayang Setelah Discroll (Sticky Menu)
0 views
Membuat Sticky Menu - Pada tutorial terdahulu saya menjelaskan Cara Membuat Widget Melayang di Blog (Sticky Widget), saat ini saya akan berbagi bagaimana membuat Sticky Menu.
Dengan membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah.
Simpan kode ini di atas
Dengan membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah.
Simpan kode ini di atas
</body> dan tentukan selectornya (pada script dibawah saya aplikasikan pada .nav).<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .nav
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>Memunculkan Menu Setelah DiSroll
Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode ini :<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .nav
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>Resource : http://www.hongkiat.com/blog/css-sticky-position/ - http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html
253 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
http://carapabae.blogspot.com
Cara buat agar Menu1 dan Menu 2 berada di tengah seperti pada screenshot diatas itu tanpa harus nambahin margin-left atau left:..% dsb. itu gimana ya kang?
Nuhun sebelumnya dan salam kenal.
http://caraunic.blogspot.com/
O-KAO
www.parengan.com
makasih ya ,hehe :D
btw, boleh request ga kang? pengen tau cara bikin kotak dialog pas awal buka blog, kaya di blognya urangkurai pas liat postingannya kang. :)
hatur nuhun sateuacanna.
Kang Gaduh Template Kanggo Video abdii ?
Contoh di palih dieu http://twinsxtv.blogspot.com/
http://prntscr.com/267f4h
baliblogers.blogspot.com
Terima kasih :D
Itu ke hapus kali...coba lihat htmlnya dengan teliti...
Nice deh tutornya..
Kenalkan blog baru saya http://yasdil-blog.blogspot.com/
- salam damai!
Pami CSS srg HTML table Valid HTML5 nu kumha ?? Nu simkuring Valid HTML5, tapi table na biasa kang janten teu aya nilai senina hehe :)
<td ...
Mohon pencerahannya kangggg.... ini link urlnya [http://id.wispop.com/search/label/wisata%20alam]
- salam damai
WEBGUEBO
supaya menu nya bisa di show hide
- BLOGWALKING -
-moz-backface-visibility: hidden;
yang dimaksud/pengertian tersembunyi dari visibilitas ini apa kang ???
widget recent comment yg V.3 itu komentarnya admin di hilangkan ya kang???
ijin kopi om...! (pisang gorengnya nyusul)
Kan biasanya gini, ini kan url awal http://misal.com//2013/10/bla-bla.html setelah klik reply jadinya gini kan > http://misal.com//2013/10/bla-bla.html#r_c42940324934243042934
Kalau di blog saya tetap gk berubah kang @@, .
Kira2 gpp gk kang kalau gtu ??
http://2.bp.blogspot.com/-QcyWN6ooc4k/Un-HXXMG3cI/AAAAAAAAB9s/1Na0xAbd5nA/s320/responsip.png
http://www.fullblogdesign.com/2013/09/menu-navigasi-responsive.html
jangan ada div pada elemen ul, coba ganti span
check -> www.fajriandaviar.blogspot.com
- salam damai
http://www.kompiajaib.com/2012/04/menambahkan-fungsi-google-custom-search.html
Kalau yang ini kenapa ya http://3.bp.blogspot.com/-qkeD7jUugbk/Un8d7SVOkrI/AAAAAAAAB20/rFKbDeJ0fJs/s1600/kosong.png
Postnya kan ada 4 baris dan kenapa baris selanjutnya kosong .. Cara mengatasinya gimana ya kang ?
BTW eta menu meni aya ku hebat kitu
Btw, untuk melebarkan menu sehalaman penuh itu gimana ya Kang Ismet, saya udah coba width+100%, width auto tetep nggak lebar2.
Terima kasih sebelumnya.
Ikuti @kangismetdotnet
gitu gitu deh pokoknya ..
tolong bantuannya yah
coba kembali lagi ke atas, di situ ada link Membuat Sticky Widget
makasih kang, triknya mantap!
http://1.bp.blogspot.com/-pNtOrLFgjVg/Un8PLoNPxGI/AAAAAAAAB2k/e0nEkDYCIBw/s1600/kang.png
Center60.com <
#panjz{width:100%;--------}
bongkar lagi, oprak aprek template