Membuat Menu Navigasi Menjadi Melayang Saat Digulir

(isi iklan)

Membuat Menu Navigasi Menjadi Melayang Saat Digulir

Menu navigasi adalah salah satu bagian terpenting yang digunakan pengunjung untuk menjelajahi Blog. Kebanyakan blogger memasang menu navigasi ini di bagian paling atas halaman. Sehingga ketika pengunjung membaca artikel dan menggulir halaman, menu navigasi tersebut tidak akan terlihat. Jika terdapat konten pada menu navigasi yang tidak ingin terlewatkan dari pandangan pengunjung, kamu bisa menggunakan menu navigasi yang posisinya melayang. Jadi posisi menu navigasi akan terus berada di bagian paling atas halaman walau pun halaman digulir.

Jika kamu membutuhkan menu navigasi melayang, maka kamu bisa langsung menggunakan template yang memang menggunakan menu navigasi melayang. Namun jika kamu tidak ingin mengganti template karena alasan tertentu, dan pada template yang kamu pakai sekarang tidak terdapat sama sekali menu navigasi, maka kamu bisa memasang menu navigasi melayang dengan cara klik disini. Jika pada template kamu sudah terdapat menu navigasi namun posisinya tidak melayang, kamu bisa membuatnya melayang dengan cara yang akan saya bahas kali ini.

Silakan ikuti tutorial untuk membuat menu navigasi di Blog kamu menjadi melayang.

Membuat Menu Navigasi Menjadi Melayang

Menentukan selektor

• Pertama kamu harus mengetahui id elemen menu navigasi di Blog kamu. Pada dashboard Blogger masuk ke menu Template dan klik Edit HTML.
• Perhatikan salah satu menu/konten pada menu navigasi. Contohnya terdapat menu "Privacy Policy". Dalam halaman HTML Blog, carilah kata "privacy policy".
• Kamu harus memahami script elemen ini dan id elemen menu navigasi akan kamu temukan. Pada contoh di bawah id elemen menu navigasi adalah <div id='navitions'>

• Kemudian carilah kode CSS dari elemen menu navigasi dengan cara mencari kata "NavbarMenuAtas".
• Kamu harus memahami script, maka kode CSS dari menu navigasi akan kamu temukan. Selektor dari menu CSS biasanya diawali dengan "." atau "#", contohnya #NavbarMenuAtas".

Cara membuat menu navigasi di Blog menjadi melayang

• Pada dashboard Blogger silakan masuk ke menu Template dan klik Edit HTML.
• Dengan tombol ctrl+F silakan cari kode </body> kemudian letakan kode berikut di atas kode </body>.

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

• Kemudian ganti kode #NavbarMenuAtas dengan dengan selektor yang telah kamu temukan di Blog kamu.
• seperti menu navigasi adalah <div id='navitions'>

Menu navigasi menjadi melayang dan hanya muncul setelah halaman digulir

Jika ingin membuat menu navigasi di Blog kamu menjadi melayang, namun menu navigasi tersebut akan muncul hanya setelah halaman di gulir, gunakanlah kode berikut. Cara memasangnya sama dengan cara yang telah saya jelaskan sebelumnya.

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

Membuat agar tidak melayang saat di gulir di tampilan mobile

Dan satu lagi ini tambahan, jika anda menggunakan template responsive dan tidak ingin 

menampilkan pada Mobile Versi bisa di tambahkan seperti ini  mobile='no':

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


Kemudian ganti kode #NavbarMenuAtas dengan dengan selektor yang telah kamu temukan di Blog kamu.



Menu navigasi menjadi melayang dan hanya muncul setelah halaman digulir
Jika ingin membuat menu navigasi di Blog kamu menjadi melayang, namun menu navigasi tersebut akan muncul hanya setelah halaman di gulir, gunakanlah kode berikut. Cara memasangnya sama dengan cara yang telah saya jelaskan sebelumnya.

Oke semoga bermanfaat, itulah cara saya... Jangan Lupa berkomentar jika berhasil.

Tweet

Judul	Membuat Menu Navigasi Menjadi Melayang Saat Digulir
Deskripsi	Membuat Menu Navigasi Menjadi Melayang Saat Digulir Menu navigasi adalah salah satu bagian terpenting yang digunakan pengunjung untuk men...
Author	Unknown
Author Rating	89,99%/ 100% Suara Dari 9999 Ulasan

Share this with short URL: Get Short URL

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di IDCEPU

Tag : Blogger, TIPS BLOGER