Cara Membuat Menu Statis Melayang Saat Blog Discroll

Baca Juga

Ilustrasi: mybloggerlab.com

MENU blog demo New Johny Wuss (NJW) ini sticky, statis, melayang (floating), atau tetap muncul saat halaman discroll ke bawah. Coba aja, navigasi menu tetap ada 'kan di bagian atas (top bar)? Bagaimana cara memunculkan, memasang, atau membuatnya?

Ini dia, khusus bagi Anda pengguna template New Johny Wuss ini ya. (Yang belum pake template ini, silakan download).

Tutorial ini berlaku juga untuk Template New Johny Wuss V2.

Cara Membuat Menu Statis/Melayang di Template Blog NJW
1. Template > Edit HTML
2. Copy & Paste kode berikut ini di atas kode </body>. Kode </body> ini ada di bagian bawah template, sebelum </HTML>

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

2. Biar tampikan Menunya pas panjangnya, maka GANTI kode berikut ini. (Cari dengan cara tekan Ctrl+F dan masukkan #menu)

#menu{background:#343434;width:99%;margin:0 5px 0 5px;color:#eee;height:35px;border-bottom:1px solid #f9f9f9}

Ganti semuanya dengan kode ini:

#menu {background: #343434;width: 980px;margin: 0 0 0 -10px;color: #eee;height: 35px;border-bottom: 1px solid #f9f9f9;}

3. Biar tampilan mobilenya normal juga di bagian menu, maka tambahkan kode margin:0 di bagian kode berikut ini:

@media screen and (max-width: 768px){
.header-wrapper{margin-right:0;min-height:0;width:100%}
#header{text-align:center;width:100%;max-width:none}
#header-inner{margin:10px 0}
  #menu{position:relative;margin:0}

4. Save Template!

Itu dia Cara Membuat Menu Statis, Sticky, Floating alias Melayang Saat halaman Blog Discroll ke bawah, khusus di template blog New Johny Wuss. Bagi pengguna template lain, silakan menyesuaikan.*