Cara Membuat Menu Melayang Saat di Scroll (Sticky Menu) di Blog

Menu Melayang Blogger | Diwapedia

---

Menu melayang yang juga disebut sticky navigation ini banyak diterapkan karena memang sangat membantu pengunjung dalam menjelajahi isi dari website atau blog yang dibangun. Selain itu, juga sebagai salah satu cara untuk "menggoda" pengunjung agar menjelajahi halaman lain yang ada di website atau blog.

Komponen syntax utama untuk membuat menu navigasi melayang di blog ini adalah memanfaatkan dari fungsi css "position:fixed", dimana, fungsi ini dapat membuat sebuah elemen tidak berpindah dari posisinya sehingga tampak melayang.

Berikut merupakan tutorial dalam Membuat Menu Melayang Saat di Scroll di Blog. 

1. Mengecek posisi menu pada template yang dipasang pada blog kalian

Saya yakin setiap template blog pasti menggunakan class dan id yang berbeda. Maka Pertama cek dulu apa nama class atau id yang digunakan template blog kalian pada bagian menu yang akan di sticky-kan. Caranya :

• Buka halaman blog kalian, kemudian lakukan inspeksi elemen pada bagian menu yang akan di sticky, dengan cara Klik Kanan pada menu > Pilih Inspeksi Elemen

Diwapedia

Pada sampel ini saya menemukan bahwa posisi menu navigasi diatur oleh tag <div class="header-menu">

2. Edit Template Blog

• Buka halaman blogger, lalu masuk ke mode Theme > Edit HTML, lalu cari class yang digunakan untuk mengatur bagian menu di template blog kalian. Dalam sample template saya ini menggunakan class header-menu. Bisa juga dengan menggunakan CTRL + F untuk mode pencarian.

Diwapedia

Catatan : Pada CSS, penggunaan dot (titik) artinya class dan tagar (# ) artinya id.

Perhatikan pada sample script CSS diatas. Ada 2 contoh class dari header-menu, yaitu yang di kotak merah dan biru. 

Jangan sampai terjebak. Disini yang akan kita ubah adalah script CSS yang di kotak merah.

Kenapa?

Karena pada kotak merah merupakan script CSS yang nantinya akan mempengaruhi struktur tampilan dari header-menu. 

Sedangkan, kotak biru sebenarnya merupakan script CSS yang digunakan untuk membangun tampilan class container pada tag yang berada di lingkungan class header-menu.

Selanjutnya

Jika pada class menu (dalam sampel ini header-menu) di template blog kalian kebetulan ada script seperti yang di blok merah seperti gambar diatas, yaitu "position:xxx;" atau "z-index:xxx;" atau kebetulan ada keduanya, Maka silahkan hapus beserta titik koma (;) nya. Karena nantinya script ini akan diganti.

Tapi jika tidak ada, maka biarkan.

3. Menambah Script Baru

• Cari tag </body> kemudian copy dan paste-kan JavaScript dibawah ini tepat di atas tag </body> 

<script type='text/javascript'>

      $(document).ready(function() {

        var stickyNavTop = $('#fly-menu').offset().top;

        var stickyNav = function(){

          var scrollTop = $(window).scrollTop();

          if (scrollTop > stickyNavTop) {

            $('#fly-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });

          } else {

            $('#fly-menu').css({ 'position': 'relative' });

          }

        };

        stickyNav();

        $(window).scroll(function() {

          stickyNav();

        });

      });

    </script>

4. Finishing

• Cari tag div class yang mengatur menu (di sample ini header-menu) pada template blog kalian. 

Diwapedia

Perhatikan sample diatas.

Pada <div class='header-menu' > tambahkan id='fly-menu'. , sehingga kemudian menjadi <div class='header-menu' id='fly-menu'>. Hasilnya seperti gambar di bawah.

Diwapedia

• Simpan dan coba buka situs blog kalian.

Jika menu sudah berhasil melayang, maka Selamat!

Tapi, jika ternyata masih gagal, nampaknya template blog kalian belum memiliki script Ajax atau JQuery. Oleh karena itu silahkan lakukan hal ini.

• Cari tag </head> kemudian copy dan paste-kan Jquery dibawah ini tepat di atas tag </head> 

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

Sekian tutorial Cara Membuat Menu Melayang Saat di Scroll (Fixed Flying Menu) di Blog.
Semoga Bermanfaat.

Penting diingat :
*Header-menu merupakan class dari template blog saya. Ini Hanya sample.
Jadi kawan-kawan silahkan sesuaikan kembali sesuai tag class menu template masing-masing.