Script Membuat Menu Melayang di Blog Simpel

Halo sobat blogger semua, kali ini albabbarrosa akan memberikan tutorial membuat menu melayang di blog yang paling simpel. Menu navigasi memang menjadi komponen wajib yang harus ada di blog ya. Gunanya untuk mempermudah pengunjung mengakses konten apa saja yang ada di blog kamu.

Bahkan google pun menyarankan agar setiap blog memiliki menu navigasi yang tidak ribet. jika kamu punya sebuah blog yang tidak ada menu navigasinya, atau ada menu navigasi tapi sangat ribet, ketika kamu mendaftarkan ke google adsense kemungkinan besar blog kamu akan ditolak adsense, ga percaya? coba aja sendiri.

Mempercantik menu navigasi juga sangat disarankan lho, karena pengunjung akan tertarik untuk membuka menu tersebut, jadi kamu punya peluang lebih banyak agar pengunjung tidak stay di satu artikel saja. salah satu cara mempercantik tampilannya adalah dengan mengedit gaya dari menu tersebut.

Nah, yang lagi trending di tahun 2019 adalah menu navigasi yang melayang atau sticky nav, sebenarnya bukan menunya saya yang melayang tetapi juga header blognya melayang. ada banyak cara untuk membuat sticky nav, dan berikut albabbarrosa kasih beberapa cara dan style membuat menu melayang.

Menambahkan Javascript Sticky Nav

Hampir semua template blog pasti memliki header dan menu navigasi ya, namun tidak semuanya memiliki hedaer dan menu navigasi yang melayang, mungkin karena developernya kurang suka dengan hal tersebut.

Tapi kamu tak perlu kawatir, kamu masih bisa mengikuti trend menu melayang hanya dengan menambahkna javascript saja. pemasangan kodenya pun sangat simpel sekali tinggal kopi paste saja.

Pertama, cari terlebih dahulu kode hedaer menu kamu di pengaturan > edit html. Caranya cukup simpel, cari salah satu menu yang ada di menu navigasi. Contoh menu : documentation, cari tulisan tersebut maka hasilnya seperti dibawah.

Setiap template mempunyai kode header menu yang berbeda-beda. ada yang dituliskan ; nav-menu, head-menu, menu, menu nav.

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