Cara Membuat Menu Melayang saat di Scroll

 

Tutorial MediaBhakti kali ini tentang cara membuat menu Dropdown atau menu navigasi tetap berada pada posisinya meskipun halaman digulir / di scroll, atau sering juga disebut menu navigasi melayang dan dalam dunia blogging namanya sticky menu navigation. Banyak cara untuk membuat menu melayang / sticky menu untuk blog, beberapa diantaranya ada yang menggunakan CSS, JavaScript atau Jquery.

Kenapa menu harus dibuat sticky? Alasan paling logis adalah agar pengunjung blog tidak perlu repot dalam mencari menu blog meskipun sedang berada di dasar terbawah sebuah halaman blog, sehingga memudahkan pengunjung blog atau web untuk menjelajahi seluruh isi blog lewat menu navigasi yang kita buat posisinya menjadi fixed menu atau tetap.

Ternyata mudah untuk membuat menu melayang saat di scroll. Untuk memulai tutorial ini, blog anda harus memiliki fitur menu yang nantinya akan di jadikan Sticky Menu Navigation.
Jika anda sudah memiliki menu blog yang akan di jadikan sticky navigation, silahkan ikuti tutorial cara membuat menu melayang saat di scroll berikut ini.

1. Masuk ke edit HTML kemudian copy kode jquery di bawah, lalu pastekan tepat di atas kode </head> 

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Ket : sebelum di copy paste sebaiknya anda periksa dulu apakah di dalam template anda sudah terdapat kode jquery seperti di atas, jika sudah ada lewati saja langkah pertama atau ganti versi mana yang terbaru. Jangan ada jquery yang bertumpuk atau doubel cukup 1 aja & pilih yang terbaru.

Tips: lewati saja dulu langkah pertama, jika nanti hasilnya menu masih amblas saat di scroll itu artinya template anda belum memiliki kode jquery di atas.

2. Copy kode javascript di bawah ini, lalu pastekan tepat di atas kode </body>

<script type='text/javascript'>
      $(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>

Ket : ganti kode warna merah dengan id menu milik anda. id menu tiap blog bisa berbeda.
Sekedar gambaran, pada umumnya sebuah blog memiliki skema kode HTML sebagai berikut :

<div class='tm-menu'>

<b:section class='menu' id='menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>

<nav id='menu'>
    <ul>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Menu1</a></li>
      <li><a href='#'>Menu2</a></li>
    </ul>
  </nav>
</div>

[warning title="PENTING!!!" icon="exclamation-triangle"] Sebelum mengedit HTML blog anda sebaiknya anda backup terlebih dahulu template anda. [/warning]

Sekian tutorial cara membuat menu navigasi melayang di Blog semoga bisa bermanfaat dan selamat mencoba.

"Happy Blogging"

D E M O