Cara Membuat Menu Melayang Saat Di Scroll

Cara Membuat Menu Melayang Saat Di Scroll

Cara Membuat Menu Melayang Saat Di Scroll

Cara Membuat Menu Melayang Saat Di Scroll.  Setelah lama tidak pernah membuat postingan di blog ini, karena kesibukan diluar serta banyak sekali blog milik saya sehingga lupa kalo punya blog yang namanya antoncabon heheheh.  Nah tadi sewaktu browsing saya menemukan artikel tentang cara membuat sticky menu, menurut saya cukup menarik dan membuat tampilan blog jadi keren dan selain itu sesuai dengan fungsi menu, yaitu untuk membantu bernavigasi di blog atau website milik kita, dengan adanya trik ini maka semakin mudah kita menemukan letak menu navigasi, karena posisinya yang dibuat melayang di atas, sehingga ketika mouse di scroll, menu tersebut tidak ikut naik ataupun turun.
Jika anda tertarik untuk membuatnya di blog anda silahkan ikuti langkah-langkah nya berikut ini.

Cara Membuat Sticky Menu


Sticky Menu
Sticky Menu


1. Masuk ke Dashboard Blogger > Template > Edit HTML
2. Kemudian cari kode </body> dengan menekan CTRL+F. Masukan kode berikut, letakan tepat di       atas </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    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' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script> 


Contoh Menu Navigasi
Contoh Menu Navigasi 

Pada elemen yang akan dibuat sticky dalam hal ini '.nav', bisa anda ganti dengan elemen ang lainnya tergantung selera. Sebagai contoh jika #Sidebar yang ingin dibuat sticky maka isikan '#Sidebar' dan seterusnya.

DEMO LIVE | DOWNLOAD

Selamat berkreasi, dan semoga berhasil.

Source: http://balongtutorial.blogspot.com

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Nobody likes ads, but Antoncabon is paid for using the ads on www.antoncabon.us. If you like our free articles, please consider to disable your ad blocker..

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×