Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Mengubah Menu Navigasi Menjadi Melayang Ketika Discroll

Menu navigasi yang biasa kita lihat terdapat di bagian atas Blog adalah menu yang menjadi acuan pengunjung dalam menjelajahi Blog kita. Saya akan membagikan cara membuat menu navigasi tersebut menjadi melayang ketika dicsroll. Jadi hasilnya nanti menu navigasi akan selalu mengikuti ke mana pun layar digulir dan akan terdapat di bagian atas pada layar. Dan ketika kembali digulir ke atas, ia tidak akan mentok melebihi tempatnya semula. Sehingga ketika pengunjung telah membaca artikel sampai ke bagian paling bawah, dan ingin mengakses menu navigasi, tidak perlu lagi repot-repot menggulir layar ke atas.

Menu Navigasi Melayang

Jadi dengan penjelasan tadi sobat harus mengerti. Pembahasan kali ini khusus untuk Blog yang telah memiliki menu navigasi pada template-nya. Dan nantinya menu navigasi yang telah ada tersebut akan dibuat melayang. Jadi jika dalam Blog sobat belum terdapat menu navigasi, sobat harus membuatnya terlebih dahulu atau langsung saja Membuat Menu Navigasi Melayang di Blog.

Perhatikan screenshot di bawah ini. Menu navigasi yang telah ada dan tadinya selalu diam, menjadi melayang.

Menu Navigasi Melayang

Oke, kita langsung saja ke pembahasan. Cara yang saya bagikan ini bersumber dari Blog KangIsmet. Siapa yang tidak tau? Cara yang diberikan sangat simple dan akan saya sampaikan sesingkat-singkatnya.

Mengubah Menu Navigasi Menjadi Melayang Ketika Discroll

  • Login ke akun Blogger sobat.
  • Masuk ke bagian Temaplate dan klik Edit HTML.
  • Dengan tombol ctrl + F, cari kode </body> dan letakan kode berikut di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu #NavbarMenu
    var stickyNavTop = $('#NavbarMenu').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop(); 
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya       
        if (scrollTop > stickyNavTop) { 
            $('#NavbarMenu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#NavbarMenu').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

  • Ubah kode #NavbarMenu dengan kode elemen menu navigasi pada Blog sobat.
  • Klik Simpan Template.

Sebenarnya sampai di sini langkah-langkah untuk membuatnya telah selesai. Namun saya yakin bagi pemula pasti akan merasa bingung dalam mengganti kode #NavbarMenu. Mungkin dia belum mengetahui kode elemen menu navigasi pada Blog-nya. Maka saya akan mengembangkan lagi pembahasan ini.

Cara Mengetahui Kode Elemen Menu Navigasi

  • Perhatikan menu navigasi pada Blog sobat. Contoh:
Menu Navigasi
Salah satu menu di dalamnya adalah "Daftar Isi"
  • Masuk ke Blogger >> Template >> Edit HTML.
  • Cari kata "Daftar Isi" dan temukan script-script yang mirip seperti berikut.
Merubah Menu Navigasi Menjadi Melayang Ketika Discroll
  • Cari id atau class yang terdapat di paling atas pada kode html. Maka itulah kode elemen pada menu navigasi Blog sobat.
Maka selanjutnya pada script yang saya berikan sobat ganti kode #NavbarMenu dengan kode elemen menu navigasi  yang telah sobat ketahui.

Artikel terkait : Mengubah Menu Navigasi Menjadi Melayang Ketika Discroll

Artikel Blog Regi Brader Lainnya :

0 komentar:

Post a Comment

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved