Cara Membuat Menu Statis Melayang Saat Blog Discroll

Posted by New Johny Wuss

Cara Membuat Menu Statis Melayang Saat Blog Discroll
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.*

» Thanks for reading: Cara Membuat Menu Statis Melayang Saat Blog Discroll
Previous
« Prev Post
CB Blogger
New Johny WussUpdated: January 27, 2015

3 comments:

  1. Keren banget template nya mas. Mau dong yang premiumnya..

    ReplyDelete
    Replies
    1. Template New Johny Wuss ini GRATIS. Klik menu "Download" di atas

      Delete
  2. mohon pencerahanya gan ane sudah coba tapi kenapa saat di scroll menu tidak stay tapi malah pindah ke pojok kiri atas

    tanks

    ReplyDelete

Follow & Get Update by Email

CB