Cara Membuat Menu Navigasi Melayang Mengikuti Scroll Bar atau Menu Floating ~ Ilmu Berlian

Cara Membuat Menu Navigasi Melayang Mengikuti Scroll Bar atau Menu Floating

Allo Minna! Pada postingan kali ini Ilmuberlian akan berbagi cara yang sudah banyak digunakan para bloggers tentunya, nah buat yang belum tau atau masih awam mungkin mencari-cari Cara Membuat Menu Navigasi Melayang Mengikuti Scroll Bar atau Menu Floating dan disini ada tutorialnya ikutin yuk.

Menu navigasi merupakan tempat paling vital untuk pengunjung agar dapat menjelajahi website kita dengan baik , menu navigasi yang tidak beraturan tentu saja menyulitkan pengunjung untuk menjelajah lebih luas maka dari itu membuat menu floating yang mengikuti scroll bar turun atau naik sehingga pengunjung tidak perlu repot untuk scroll ke atas lagi jika ingin melihat menu yang lain.

Cara membuat menu melayang

Langkah pertama : Yang harus kamu lakukan ialah mencari id elemen nagivasi menu yang inging dibuat melayang tadi

dengan cara masuk ke dashboard blogger di menu template dan pilih edit template

Langkah kedua : Pada postingan kali ini yang akan jadi kelinci percobaan adalah menu navigasi header terserah kalian menu mana yang ingin kalian buat melayang.gunakan Ctrl + F untuk memudahkan pencarian

Jika menu yang kalian inginkan tidak mempunyai ID elemen kalian harus jangan khawatir tambahkan saja secara manual seperti dibawah ini

kalian harus mengerti scipt css biasanya menu navigasi diawali dengan "." atau "#" jika sudah ketemu buat <div> baru dengan id elemen yang sesuai dengan menu tersebut pada template kali ini yang dijadikan id elemen adalah "nav_top_menu" sehingga dapat dibuat <div id='nav_top_menu'>

Langkah ketiga :Setelah kita mengetahui id elemen dari menu navigasi kita ,yang kalian butuhkan selanjutnya menambahkan script berikut ini tepat diatas kode </body> gunakan Ctrl + F untuk memudahkan pencarian

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

Langkah keempat : Ubah kode #nav_top_menu sesuai id elemen atau selektor yang telah kamu tentukan di blog kamu sebelumnya pada langkah kedua , simpan template dan selesai.

Coba lihat sekarang kamu sudah mempunyai menu floating atau menu melayang , semoga bermanfaat.