Efek Animasi Menu dengan jQuery

Wah lagi asik2 browsing gak sengaja nemuin tutor ini, mudah2an bermanfaat buat kita semua. Cuman buat share.

Dalam tutorial ini, kita akan mencoba menambahkan efek animasi sederhana pada menu yang dibuat dengan CSS. Kita akan memanfaatkan fungsi animate() yang sudah disediakan oleh jQuery.

Mari kita coba langkah per langkahnya.

Langkah 1

Buat tampilan menu dengan list (<ul>). Tambahkan class dengan nama “menu” pada tag <ul>.

<ul class="menu">

<li><a href="http://achmatim.net">Home</a></li>

<li><a href="http://achmatim.net/materi-kuliah">Materi Kuliah </a></li>



<li><a href="http://achmatim.net/about">About Me</a></li>

<li><a href="http://achmatim.net/downloads">Downloads</a></li>

<li><a href="http://achmatim.net/friends">Friends</a></li>



</ul>

Langkah 2

Atur tampilan menu dengan CSS. Berikut ini contohnya:

ul.menu{

margin:0 0 1em;

width:125px;

list-style:none

}

ul.menu li {

margin:0;

background:#000;

}

ul.menu li a {

position:relative;

display:block;

padding:6px 0;

width:125px;

background:#000;

color:#fff;

text-align:center;

text-decoration:none;

}

ul.menu li a:hover {

border:0;

background:#000;

color:#ff0;

}

Pengaturan yang dilakukan dengan CSS diatas dapat dijelaskan secara singkat sbb:

• Atur tag <ul> dengan class menu yaitu margin 0 dari atas dan kiri serta 1em dari bawah, lebarnya adalah 125px (default 100%) dan hilangkan bullet (titik) untuk setiap list didalamnya.


• Untuk setiap <li> di dalam <ul> atur margin di semua sisi menjadi 0 dan atur background list menjadi hitam (#000)


• Untuk link (<a>) yang ada di dalam list (<li>) atur display menjadi block, warna tulisan menjadi putih (#fff) dan hilangkan garis bawah di link.



• Untuk link (<a>) yang di-hover, ubah warna tulisan menjadi kuning (#ff0).

Langkah 3

Sertakan file utama jQuery (download versi terakhir di http://jquery.com). Dan tambahkan sedikit animasi dengan perintah berikut ini.

$(document).ready(function() {

$('ul.menu a')

.hover(function() {

$(this).stop().animate({ left: 20 }, 'fast');

}, function() {

$(this).stop().animate({ left: 0 }, 'fast');

});

});

Dengan perintah jQuery sederhana di atas, kita mengatur efek animasi yang terjadi saat sebuah link (a) dalam menu dilewati mouse (mouse-over) dan juga apa yang terjadi saat sebaliknya (mouse keluar dari area link). Kita menggunakan fungsi hover() dengan dua parameter. Parameter pertama (lihat baris 3-5) akan dijalankan saat mouse-over, dan parameter kedua (baris 5-7) akan dijalankan saat mouse-out. Saat mouse-over, pertama-tama jquery akan menghentikan animasi pada link dengan fungsi stop(), selanjutnya menjalankan animasi dengan fungsi animate() dimana komponen link akan bergeser selebar 20 pixel dari sebelah kiri (left), animasi berlangsung secara cepat (fast). Sedangkan saat mouse-out, kondisi komponen link dikembalikan ke posisi semula secara cepat (fast) pula.

Semoga bermanfaat

Download dan Demo

• Klik untuk melihat demo program.


• Klik untuk download source program

Thanks to : http://achmatim.net/