Navigasi Menu With Animasi Scroll - Hallo Sob Jody Blog, artikel kali ini berjudul Navigasi Menu With Animasi Scroll, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Navigasi Menu With Animasi Scroll
link : Navigasi Menu With Animasi Scroll

Navigasi Menu With Animasi Scroll

Sebenarnya cara ini sudah lama saya gunakan sampai saya sendiri lupa website yang membuat trik ini yang pasti websitenya bukan dari blogger Indonesia ,jadi mohon maaf jika saya tidak meletakkan link sumber Script yang saya gunakan .Beberapa waktu lalu ada seorang sahabat blogger menanyakan tentang cara membuat menu Navigasi yang apa bila di scroll menjadi fixed untuk contohnya silahkan lihat screenshot gambar di bawah ini atau coba scrool ke atas pada bagian homepage atau post page maka menu navigasi horisontal yang saya gunakan pada ketinggian 0px maka menu akan menjadi Fixed/tetap berikut gambar nya:

Untuk cara membuat Navigasi Menu With Animasi Scroll yang saya contohkan di atas  sobat harus mengenali dulu Navigasi menu yang sobat pakei ,misal kita menggunakan Navigasi menu horisontal yang ada pada template johny wuss contoh menunya seperti di bawah ini :

<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
bla bla bla --------
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<br class='clearit'/>
</div>
</div>

Coba perhatikan kode berwarna merah di atas ,karena kode pemanggilan nya berbentuk ID maka secara otomatis kode css nya pasti menggunakan tanda # di depan kode , maka kode jquery yang hrus sobat gunakan harus seperti contoh di bawah ini dan letakkan tepat di atas kode </body> :

<script type='text/javascript'>
//<![CDATA[
var num = 50; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('#toppic').addClass('fixed');
    } else {
        $('#toppic').removeClass('fixed');
    }
});
//]]>
</script>

Dan yang terakhir letakkan kode Css berikut ini tepat di atas kode ]]></b:skin> berikut kodenya :

.fixed{position:fixed;top:0;z-index:9999}

Jika sobat ada kesulitan tentang cara membuat Navigasi Menu With Animasi Scroll silahkan ajukan pertanyaan pada form komentar atau add saya di facebook

Demikianlah Artikel Navigasi Menu With Animasi Scroll

Sekian Navigasi Menu With Animasi Scroll, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Navigasi Menu With Animasi Scroll dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2013/07/navigasi-menu-with-animasi-scroll.html Semoga artikel ini bisa bermanfaat.

Tweet