May 13, 2014

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

May 13, 2014

sticky menu navigasi blog
Cara menampilkan menu statis, sticky, atau melayang (floating).

KALI ini CB berbagi tentang cara membuat Menu Navigasi blog statis yang tetap muncul (melayang) di bagian atas, saat halaman discroll ke bawah.

Contohnya? Ya... blog ini! Coba scroll ke bawah, lalu lihatlah... menunya tetap ada di bagian atas 'kan?

Menu Navigasi (Navigation Menu) yaitu menu blog yang biasa ada di deretan Home, About, dan seterusnya. Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah "berselancar" (surf) dan "baca-baca" (browse) blog kita lebih lama.

Awalnya CB "ngiri" sama menu navigasi situs Hongkiat. Saat kita scroll, menunya tetap muncul di atas. Setelah "search" di sana, ternyata Hongkiat berbagi tips cara membuatnya: Sticky Position (Bar) With CSS Or JQuery.

CB hanya ambil kodenya saja agar Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll. Cara membuatnya mudah banget.

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

1. Template > Edit HTML
2. Cari (CTRL+F) kode </body>
3. Copy kode berikut ini dan Paste di atas kode </body>

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

4. JANGAN LUPA! Sebelum klik "Save", Ganti elemen .nav dengan elemen/kode yang menjadi Navigasi Menu blog Anda. Di blog CB (New Johny Wuss), kodenya bernama #menu, sehingga kodenya menjadi:

<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>

Anda pengguna template New Johny Wuss, yang ingin Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, tinggal COPAS saja kode yang digunakan CB di atas. Tapi jangan lupa, ubah angka 99% di bagian #menu{background:#343434;width:99%;margin:0 5px 0 5px;color menjadi 950px.

Good Luck dan Happy Blogging!

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

78 comments on Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

  1. ouya ane kok ga sejajar ya gan ? coba liat blog percobaan ane *nattashanauljamlovers.blogspot.com*
    mohon bantuannya gan

    ReplyDelete
    Replies
    1. itu karena di element #menu, lebar (width)-nya 100%, coba ubah angka 100% itu menjadi 980px

      Delete
    2. Mantap gan templatenya, saya pake di www.3fors.biz ya gan, mau tanya gan, yg menu navigasinya kalo di buka pake android kok ga muncul ya. Punya agan yg blog ini juga. Gimana gan ada solusi?

      Delete
    3. Menu Navigasi ada di "Navigasi", klik aja....

      Delete
    4. wah gan, rada bingung nih.
      mau tanya nih... kalau di blog ane nih .nav nya diganti apa yah?
      www.inspirasimuda.tk mohon maap kalau ganggu nih,

      Delete
    5. udah saya ganti jadi px, tapi kok malah yang di versi mobile jadi panjang banget

      Delete
  2. kok jadi aneh gini gan? :D

    ReplyDelete
  3. alhamdulillah tutorial ini sukses di blog saya gan.. jazakumullahu khoiro

    blog saya -> http://TektenaTokoOnline.blogspot.com/

    ReplyDelete
  4. oia gan ganggu lagi ane :)

    kalo navigasinya kaya gini

    #toppic {width:910px;height:auto;background:#ff0000;border-top:0 solid #a60606;margin:0 auto;padding:0;overflow:hidden;}
    #topwrapper {width:910px;height:auto;margin:0 auto;padding:0}
    .clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
    #top {width:100%;}
    #top, #top ul {padding: 0;margin: 0;list-style: none;}
    #top a {border-right:0 solid #a60606;border-left:0 solid #ccoooo;text-align:left;display: block;text-decoration: none;padding:13px 13px 13px;font:12px Arial;text-transform:uppercase;color:#ffffff;}
    #top a:hover {background:#a60606;}
    #top a.trigger {background-image: url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 6px 26px 8px 12px;background-position: right center;}
    #top li {float: left;position: relative;}
    #top li {position: static; width: auto;}
    #top li ul, #top ul li {width:240px;}
    #top ul li a {text-align:left;padding: 6px 10px;font-size:13px;font-weight:normal;text-transform:none;font-family:Arial, sans-serif;text-transform:uppercase; border:none;}
    #top li ul {z-index:100;position: absolute;display: none;background-color:#a60606;margin-left:-60px;padding:10px 0;-moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:0; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0;-moz-box-shadow:0 0 0 rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
    #top li ul li {width:120px;float:left;margin:0;padding:0}
    #top li:hover ul, #top li.hvr ul {display: block;}
    #top li:hover ul a, #top li.hvr ul a {color:#ffffff;background-color:transparent;text-decoration:none;}
    #top ul a:hover {text-decoration:underline!important;color:red}


    gimana Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll gan? :)

    sorry ya gan,saya ganggu mulu :)

    ReplyDelete
    Replies
    1. berarti ganti .nav dengan #toppic

      Delete
  5. terimakasih gan :) saya sudah ngerti sekarang :)

    request dong gan cara membuat slider dg bxslider (saya sudah hosting gan tapi ga tau yg mana yg akan di panggilnya dan cara meletakkannya di blogger :)

    edi efendi

    ReplyDelete
    Replies
    1. Slider gak bagus buat SEO. Baca > http://contohblognih.blogspot.com/2014/05/featured-content-slider-seo-blog.html

      Delete
    2. saya sudah baca artikelnya dr kemaren ,dan saya sudah tau gan :) tapi saya sangat perlu ni gan

      bantuin ya gan :)

      Delete
  6. aduh bos tolong di kasih tiap kasih kasih kode ya karena odenya 2 jadi yang kit amasukan ini kode yang bawah apa atas siha,,,, mksih

    ReplyDelete
    Replies
    1. pake kode pertama, di nomor tiga...... ganti dulu huruf yang warna merah (.nav) dengan elemen sejenis (menu navigasi) yang ada di template Anda...

      Delete
  7. maaf ni gan saya ganggu lagi

    apa yg salah ya sama menunya template saya? mohon pencerahannya gan ): (alamatnya masih sama dg yg diatas)

    thanks before :)

    ReplyDelete
  8. kok drop menunya jadi hilang

    ReplyDelete
  9. nagigasinya jadi berantakan gan, gmna ya, coba lihat trovustar.blogspot.com

    ReplyDelete
    Replies
    1. udah dibenerin ya, CB lihat udah oke navigasi melayangnya bagus.... Congratz!

      Delete
  10. udah gan, sipp..
    oh ya ada tutorial bikin menu di footer ga kya d blog ini,,,

    ReplyDelete
  11. thanks gan .. udah bisa

    g4download.blogspot.com

    ReplyDelete
  12. mantap sob tutornya, udah bisa. coba deh dicek gan, hhaha. makasih.

    ReplyDelete
  13. punya q kalau di scroll menunya berubah jadi vertikal, itu gmana ya ?

    ReplyDelete
  14. terima kasih banyak infonya.saya sudah praktek nih.
    ilmudes.blogspot.com

    ReplyDelete
  15. super sekali nie infonya, dan langsung saya praktekan di blog ane

    coba liat gan klinikandroid.com . kurang apa ya gan itu ? mksih

    ReplyDelete
  16. berhasil gan.

    gan kalau bikin widget kanan tetap melayang saat di scrool tutornya gmna. kaya nya dulu blog CB widget kanan nya gitu...

    mksih

    ReplyDelete
  17. patut di cobaa nih mas..trimss infonya,,,

    ReplyDelete
  18. terima kasih masta triknya udah berhasil saya terapakan, tapi yang menjadi permasalahan kenapa menu navigasi nggak muncul tepat ditengah ya ketika di scroll kebawah tapi malah muncul disamping kiri, mohon pencerahanya masta

    ReplyDelete
    Replies
    1. Coba diubah width: 960px jadi 100%

      Delete
    2. berhasil masta tapi gantian kenapa seluruh content ikut miring ya, ada solusi lain nggak masta?

      Delete
  19. blom ngerti saya gan, cara nambahin tulisan/menu navigasinya gmana??

    ReplyDelete
    Replies
    1. lihat panduan templatenya, ada yang tinggal nambah di Layout, ada juga harus ke dalam template: template > edit html > cari menu "home"

      Delete
  20. trimakasih mas,,, tapi di blog saya saat di scrol yang tetep di atas tulisan menunavigasinya aja,tapi warnanya tidak ada , hanya tulisan

    ReplyDelete
  21. Di blog saya kalau pakai ini bisa, tapi saat discrool warnanya gak keliatan,. Ada solusi kang CB ?

    ReplyDelete
    Replies
    1. kalo pake template mas-sugeng, tanyanya ke sana dong :)

      Delete
  22. keren mas... tapi kalo navbarnya dipasang adsense ga apa-apa nih mas? ga melanggar ketentuan adsense?

    ReplyDelete
  23. mohon pencerahannya ya bang ini kok gak bisa ya hehehe
    himapgsdunnessemarang.blogspot.com

    ReplyDelete
  24. ane kok gk bis y gan , cob tolong ksi solusinya gan

    ReplyDelete
  25. mantap, ini nih yang ane cari-cari, izin install ke template ya gan, makasih :)

    ReplyDelete
  26. Mudah di praktekkan ternyata, udah saya coba di blog saya dan berhasil. Terimakasih ilmunya sangat bermanfaat :)

    ReplyDelete
  27. @ All, sama-sama [jawaban bagi komentar terim kasih yang belum dijawab :) ]

    ReplyDelete
  28. Makasih banget tutorialnya :D

    ReplyDelete
  29. Kalau kita sudah punya menu, terus mau dibikin melayang, bisa ga tinggal nambahin apa gitu ? :)

    ReplyDelete
    Replies
    1. bisa, ya nambah kode di atas itu caranya :)

      Delete
  30. gan saya buat menu dari widget pages, itu bisa ga dibikin melayang??? trus gmn nyari kodenya?? mohon bantuannya,,,,makasih.

    ReplyDelete
  31. berhasil berhasil gan, thanks agan cibi

    ReplyDelete
  32. Agan cibi, diblog ane berhasil tapi pas turun ukuran lebar tambah kecil. Ada solusi?

    ReplyDelete
    Replies
    1. margin nya disesuaikan dulu. tiap template kan beda-beda. ada yg 99% dan ada yag 100%. diubah ke px. misalkan jadi 950px

      Delete
  33. pas di homepage kenapa sticky featurenya gk work ya, cuma di postingan aja

    ReplyDelete
  34. Sukses mas CB. Awalnya sya bingung krn waktu sya test dan sya scroll kebawah posisi sticky kepanjangan disebelah kanan. Ternyata sya lupa ngasih ngasih keterangan px pada 950 nya.

    ReplyDelete
  35. thanks gan ane udah coba nih dan langsung berhasil

    ReplyDelete
  36. sukses kang makasi ilmunya

    ReplyDelete
  37. awalnya ok, tetapi setelah di perhatikan kayaknya ada yg salah mas,menu saya kalau di tarik ke bawah pada saat loding, stickynya tdk berfungsi.

    ReplyDelete
  38. Punya saya kok gk berhasil ya :(

    ReplyDelete
  39. Om CB tolong dong bantuannya, saya sudah ikuti triknya tpi msih blum berhasil. walaupun sudah gnti .nav menjadi #menu karena blog sama hmpir sama sma om CB. mohon bantuannya om CB. ini blog sya om >>hendrik.id

    begini tampilan menu sya om.

    /* CSS Main Menu */
    #menu-wrap {background:#222;height:50px;margin:0 20px;position:relative;border-bottom:4px solid #ef4836;}
    #menu, #menu ul {margin:0;padding:0;list-style:none;}
    #menu ul{height:50px}
    #menu {background:#222;color:#fff;height:50px;}
    #menu:before,#menu:after {content:"";display:table;}
    #menu:after {clear:both;}
    #menu li {float:left;display:inline;position:relative;font-family:'Ruda';font-size:14px;font-weight:700;text-transform:uppercase;margin:0;}
    #menu a {display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;
    transition:all 0.2s ease-out;}
    #menu li:hover > a {background:#333;color:#fff;}
    #menu ul {margin:20px 0 0 0;visibility:hidden;opacity:0;height:auto;min-width:150px;background:#fff;position:absolute;z-index:99;top:50px;left:0;
    box-shadow:0 4px 5px -2px rgba(0,0,0,.2);transition:all 0.2s ease-out;}
    #menu li:hover > ul {opacity:1;visibility:visible;margin:0;}
    #menu ul ul {top:0;left:150px;margin:0 0 0 20px;box-shadow:0 4px 5px -2px rgba(0,0,0,.2);}
    #menu ul li {display:block;width:100%;font-family:'Droid Sans';font-size:13px;font-weight:400;text-transform:none;}
    #menu a.ai{padding:0 27px 0 14px;}
    #menu li > a.ai::after {content:"\f107";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;right:10px;color:#aaa;transition:all 0.2s ease-out;}
    #menu li > a.ai2::before,#menu li > a.ai3::before {content:"\f105";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;left:10px;color:#ccc;transition:all 0.2s ease-out;}
    #menu li > a.ai:hover::after,#menu li > a.ai2:hover::before,#menu li > a.ai3:hover::before{color:#fff;}
    #menu ul a {padding:0 20px 0 25px;background:#fff;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all 0.2s ease-out;}
    #menu ul a:hover {background-color:#ef4836;color:#fff;}
    #menu ul li:first-child > a:after {content: '';position:absolute;left:20px;top:-6px;
    border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;transition:all 0.2s ease-out;}
    #menu ul ul li:first-child a:after {left:-6px;top:50%;margin-top:-6px;border-left:0;
    border-bottom:6px solid transparent;border-top:6px solid transparent;border-right:6px solid #fff;transition:all 0.2s ease-out;}
    #menu ul li:first-child a:hover:after {border-bottom-color:#ef4836;}
    #menu ul ul li:first-child a:hover:after {border-right-color:#ef4836;border-bottom-color:transparent;}
    .no-transition {transition:none;opacity:1;visibility:visible;display:none;}
    #menu li:hover > .no-transition {display:block;}
    #menu .homers {line-height:50px;margin-left:20px;}
    #menu .homers a{background:#ef4836;color:#fff;padding:0 15px;}
    #menu .homers a:hover{background:#f55847;color:#fff;}
    #menu .homers .fa.fa-home{text-align:center;color:#fff;}
    #menu-wrap input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer;}
    #menu-wrap label{font-family:'Ruda';font-size:30px;font-weight:700;text-transform:uppercase;display:none;width:35px;height:51px;line-height:51px;text-align:center;}
    #menu-wrap label span{font-size:13px;position:absolute;left:35px}
    #menu li.ranpost {cursor:pointer;float:right;}
    #menu li.ranpost a{padding:0 18px;font-size:16px;line-height:50px;}

    ReplyDelete
  40. coba pake #menu-wrap
    atau blm pasang jquery kali

    ReplyDelete
  41. pengen ini.. kasih tau gimana aku tau kode navigasi menunya, mas????? akunya baru di blogger, ngga ngerti :D

    ReplyDelete
    Replies
    1. klik kanan menu navigasi > inspect elements

      Delete
  42. gan ak bingung , menu ganti apa ?

    ReplyDelete
    Replies
    1. juragan juga bingung, menu ganti apanya gimana?

      Delete
  43. Min kalo biar tidak muncul gimana? saya pake template johny wuzz 3

    ReplyDelete
  44. gan navigasi menu 2 di template ane kan ada box search nya di samping, nah pas di scroll yg box search ikut ter seret, jadi navigasi menu yg melayang cuma spotong, gimana tuh gan ngatasinyam
    makasih

    ReplyDelete
  45. Kalau cara bikin backgroundnya jadi transparan saat di scroll?

    ReplyDelete
  46. Makasih CB.. Alhamdulillah SUkses,. :)

    ReplyDelete
  47. saya punya masalah saat di skroll ke bawah,, background menunya jadi transparant dan tulisannya menjadi warna putih. bagaimana cara saya mengaturnya. terimakasih sebelumnya

    ReplyDelete
  48. kalau yang ingin tetap muncul,, misal di blog ini, bagian menu paling atas , yaitu about, kontak dan menu social media sebelahnya , bisa gak?

    ReplyDelete
  49. Punya ane saat di scrool kok cuma tulisannya doang yang tampil, nggak dgn backgrounnya...
    Dan di perangkat sellular saat saya klik navigasi tulisannya mengarah ke bawah. Mohon bantuannya...

    ReplyDelete
    Replies
    1. http://www.contohblog.com/2017/07/memperbaiki-tampilan-navigasi-menu-responsive-mobile.html

      Delete
  50. Mas itu saya pasang ko menu navigasinya tulisan navigasi nya ke bawah ya bukan sejajar kaya punya cb. Trus transparan lagi

    ReplyDelete
  51. Kalau pengen kaya punya cb gni gmna mas tmplate jonywuzz tulisan navigasinya kebawah dan transparan. Bagaimana kl merubah kaya pnya cb yg ini

    ReplyDelete
  52. kalau buat agar side barnya tetap nongol saat discroll ada gak tipsnya.

    ReplyDelete
  53. Sulit Mas, coba bookmark dulu mas.Makasih

    ReplyDelete

Contact Form

Name

Email *

Message *