Cara Membuat Menu Blog Sticky Ketika di Scroll

Sticky Menu biasanya identik dengan menu yang apabila konten website di scroll maka posisi menu seolah berubah atau jadi floating,  dimana menu tersebut akan tetap terlihat atau jadi fixed meskipun kita melakukan scroll, tentu ini sangat berbeda dengan menu biasa karena menu biasa posisi menunya tidak akan terlihat ketika user melakukan scroll.

Konsep ini tentunya tidak sama seperti Membuat Header Website Fixed Tidak Bergerak Saat di Scroll karena disini kita melibatkan Javascript

Percobaan kali ini akan saya lakukan / terapkan pada template Evo Magz. Untuk membuat sticky menu blog ketika di scroll ini mungkin akan saya bagi keadalam tiga bagian yaitu

1. Pembuatan CSS/Style untuk menu 
2. Pembuatan Media Queris/Screen untuk Tampilan Responsive menunya, pembuatan menu responsive ini pernah dibahas pada artikel Cara Membuat Tampilan Navigasi Menu Website Responsive
3. Penambahan Javascript Untuk Merubah Secara Otomatis Jadi Fixed Ketika di Scroll 
4. Menempatkan Menu
   

*Catatan
Untuk membuat menu ini Anda memerlukan jquery, silahkan tambahkan <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
diatas kode </head>

Berikut ini adalah Cara Membuat Menu Blog Sticky Ketika di Scroll

#TAHAP PERTAMA

Cari script <b:skin><![CDATA[/* dan tambahkan susunan CSS berikut dibawahnya, atau cari script ]]></b:skin>

 <!-- Menu Fixed If Scroll By Ahmad Sigarantang -->
#menuluhur{width:100%;max-width:996px;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menuluhur ul,#menuluhur li{margin:0;padding:0;list-style:none;}
#menuluhur ul{height:45px}
#menuluhur li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;
font-weight:bold;}
#menuluhur a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}
#menuluhur ul li:hover a{color:#666;}
#menuluhur input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menuluhur label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menuluhur label span{font-size:13px;position:absolute;left:35px}
#menuluhur ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menuluhur ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}
#menuluhur ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menuluhur li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menuluhur a.dutt{padding:0 27px 0 14px}
#menuluhur a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menuluhur a.dutt:hover::after,#menuluhur ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menuluhur ul.menux li a{background:#fff;color:#919392;}
#menuluhur ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menuluhur li.facebook {padding:0 5px;}
#menuluhur li.facebook,#menuluhur li.twitter,#menuluhur li.youtube,#menuluhur li.googleplus,#menuluhur li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menuluhur li a.facebook:hover,#menuluhur li a.twitter:hover,#menuluhur li a.youtube:hover,#menuluhur li a.googleplus:hover,#menuluhur li a.linkedin:hover{color:#8493a0;}
#menuluhur li.facebook .fa.fa-facebook,#menuluhur li.twitter .fa.fa-twitter,#menuluhur li.youtube .fa.fa-youtube,#menuluhur li.googleplus .fa.fa-google-plus,#menuluhur li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menuluhur li.facebook:hover,#menuluhur li.twitter:hover,#menuluhur li.youtube:hover,
#menuluhur li.googleplus:hover,#menuluhur li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menuluhur li.facebook:hover .fa.fa-facebook,#menuluhur li.twitter:hover .fa.fa-twitter,#menuluhur li.youtube:hover .fa.fa-youtube,#menuluhur li.googleplus:hover .fa.fa-google-plus,#menuluhur li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

#TAHAP KEDUA

Selanjutnya kita tambahkan media queris supaya tampilan menunya jadi responsive, tambahkan script css dibawah ini dibawah script CSS pada tahap pertama

<!--Menu Fixed If Scroll By Ahmad Sigarantang -->
@media screen and (max-width:960px) {
#menuluhur li:hover > ul.menux{display:block;}
#menuluhur ul{border:none;border-bottom:4px solid #e9e9e9;}
#menuluhur{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menuluhur ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menuluhur ul.menux{width:100%;position:static;border:none}
#menuluhur li{display:block;float:none;width:auto;text-align:left}
#menuluhur li a{color:#666}
#menuluhur li a:hover{background:#f1f1f1;color:#f9f9f9}
#menuluhur li:hover{background:#8493a0;color:#fff;}
#menuluhur a.dutt{font-weight: bold;}
#menuluhur li:hover > a.dutt,#menuluhur a.dutt:hover{background:#b1b1b1;color:#fff;}
#menuluhur input,#menuluhur label{display:inline-block;position:absolute;right:0;top:0;}
#menuluhur input:after,#menuluhur label:after {content:"\f0c9";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menuluhur input{z-index:4;}
#menuluhur input:checked + label{color:#fff;font-weight:700}
#menuluhur input:checked ~ ul{display:block}
#menuluhur ul li ul li a{width:100%;color:#666;}
#menuluhur ul li ul li a:hover{background:#8493a0;color:#fff;}
#menuluhur ul.menux a{background:#fff;color:#666;}
#menuluhur ul.menux a:hover{background:#8493a0;color:#fff;}
#menuluhur ul.menux li{background:#fff;color:#666;}
#menuluhur ul.menux li:hover{background:#8493a0;color:#fff;}
#menuluhur ul.menux li a{background:#fff;color:#666;}
#menuluhur ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}

#TAHAP KETIGA

Tahap ketiga yaitu membuat javascript untuk merubah class dari menuluhur yang tadinya posisinya relatif jadi fixed saat di scroll, tambahkan script dibawah ini, terserah menaruhnya mau dimana, yang penting script tersebut ditaruh didalam body, disini saya menaruhnya dibawah footer

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

#TAHAP KEEMPAT

Tahap terkahir adalah menaruhnya pada bagian menu, disini tentunya menu – menu pada masing – masing template yang digunakan berbeda, jadi untuk penempatannya tidak akan saya jelaskan, intinya tempatkan pada bagian menu yang ada didalam blog, disini saya menggunakan eco magz, jadi saya menghapus bagian secondary menu dengan class menuluhur, berikut contoh scriptnya

<nav id='menuluhur'>
    
    <input type='checkbox'/></input>
<label></label>
       <ul>
     <li><a href='#'>Ahmad</a></li>
     <li><a href='#'>Ganteng </a></li>
     <li><a href='#'>Sekali</a></li>
     <li><a href='#'>Sejak</a></li>
      <li><a href='#'>Lahir</a></li>
       </ul>
  
    
  </nav>

Silahkan Lihat contoh hasilnya dibawah

 DEMO

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple