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

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


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

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×