Cara membuat Menu Dan SubMenu Melayang Di Blogg/Web atau disebut juga Sticky Menu

Pada kesempatan kali ini saya akan menjelaskan bagaimana Cara membuat Menu Dan SubMenu Melayang Di Blogg/Web atau disebut juga Sticky Menu, Semakin menyelam di dunia blogg tak terasa lama lama semakin lama semakin tua. hihihi. baiklah sob kali ini saya mau berbagi bagaimana membuat  Sticky Menu. Gampang kok sob tidak perlu buang waktu lama langsung sajaaah ya .

Apasih manfaatnya Membuat Sticky Menu ?

Pasti ada sob. secara giniloh sob. tujuan kita membuat blog itukan sasarannya adalah para pengunjung atau visitor blog sobat, nah maka dari itu. cieeeh hihihi. sobat juga harus bisa memanjakan pengunjung blog sobat. ibarat kata kalau dalam jualan pengunjung itu adalah pembeli sementara Pembeli itu seperti raja. nah kalau pengunjung blog sobat betah maka keuntungan besar juga buat sobat. iya kan.... Apalagi sobat sebagai Blogger pemula seperti ane dan mungkin panduan blogger pemula ini dapat bermanfaat buat sobat kilk disin

Langkah membuat Menu Dan SubMenu Melayang Di Blogg/Web atau disebut juga Sticky Menu yang harus sobat jalankan adalah 
Pertama Log in dulu ke blogg sobat 
Kedua Pilih Dasbor Lanjutkan Ke Tamplate Dan pilih HTML
Ketiga Untuk lebih cepat dalam pencarian sobat arahkan saja kursor mose Pc kedalam Kode kode CSS atau HTML dan cari menggunakan ctrl+F maka akan muncul kotak pencarian disebelah Kanan atas  kotak kode HTML, selanjutnya ketikan kode ini </body> jika sudah ketemu langkah selanjutnya adalah :
Simpan kode dibawah ini di atas </body> 

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

• Demo

Selanjutnya jika sobat ingin menampilkan MENU dan SUBMENU hanya setelah di scroll, maka sobat harus gunakan kode ini caranya persis sama seperti diatas yang sudah saya jelaskan walaupun tata bahasanya kurang baik. lumayan lah daripada copas full hihi seperti sobat hihih maaf sob becanda :

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

langkah terahir setelah sobat sudah menjalankan panduan diatas dari mulai awal sampai ahir makas sobat harus meng save terlebih dahulu setelah itu tutup dan coba buka blog sobat dan mainkan roda mos ditangan sobat jika belum berhasil silahkan komen

Demikian artikel singkat Cara membuat Menu Dan SubMenu Melayang Di Blogg/Web atau disebut juga Sticky Menu ini saya buat semoga dapat bermanfaat buat sobat dan saya ucapkan trimaksih atas kunjungannya, semoga sukses ya sob.

Cara Cepat Dan Mudah Artikel/postingan Anda terindex oleh Google

Resource : http://www.hongkiat.com/blog/css-sticky-position/ - http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html Dan http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html

Tweet