Efek Animasi Sederhana pada Menu dengan jQuery

By Achmad Solichin On 2 February 2009 In download, web development

Salah satu keunggulan jQuery adalah “keluwesan” dan kemudahannya dalam berkolaborasi dengan CSS (Cascading Style Sheet) sehingga penampilan halaman web menjadi semakin indah. Selain itu jQuery juga dapat menjembatani “kesenjangan” beberapa browser dalam mengimplementasikan CSS.

Di sisi lain, animasi, merupakan hal yang masih diminati dalam dunia web karena menjadi salah satu hal yang akan menarik perhatian pengunjung. 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>.

[source language="html"]

[/source]

Langkah 2

Atur tampilan menu dengan CSS. Berikut ini contohnya:

[source language="css"]
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;
}
[/source]

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.

[source language="javascript"]
$(document).ready(function() {
$(‘ul.menu a’)
.hover(function() {
$(this).stop().animate({ left: 20 }, ‘fast’);
}, function() {
$(this).stop().animate({ left: 0 }, ‘fast’);
});
});
[/source]

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
Klik untuk download artikel dalam bentuk PDF.

Referensi

Jonathan Chaffer, Karl Swedberg, Learning JQuery, Packt Publishing, 2007.
Achmad Solichin, jQuery untuk Orang Awam, http://achmatim.net, 20 Januari 2009.
Brandon Aaron, Quick Tip: Prevent Animation Queue Buildup, http://www.learningjquery.com, 20 Januari 2009.

Tags:jquery, menu

About Author

Achmad Solichin | Website | Twitter

Telah menjadi staff pengajar di Universitas Budi Luhur (Jakarta) sejak tahun 2005. Selain mengajar, dia juga menyusun berbagai tutorial praktis di bidang komputer dan sempat menulis beberapa buku gratis, semua dipublikasikan di situs resminya, Achmatim.Net

Comments

1569 days ago

away
ckckckck
udah lama saya tidak posting artikel berbobot neh

away’s last blog post..alternatif layanan short url, http://penting.web.id
Reply
- 1569 days ago
  
  achmatim
  #away
  emang seperti apa sih artikel yang berbobot itu? semua posting yang bermanfaat untuk orang lain adalah berbobot menurut saya.
  Reply
1569 days ago

_subhan_
wow, info nya bermanfaat mas.
kebetulan lg mau coba dgn asp
tp gag tau jQuery itu kek apa.
bs d coba d wordpress kan yach..
Reply
1561 days ago

yaddi
mas, punya script untuk mendeteksi external link (link yang mengarah keluar) terus link tersebut otomatis diberi icon atau style berbeda

yaddi’s last blog post..Mengenal Layout
Reply
- 1559 days ago
  
  achmatim
  #_subhan_
  jquery bisa dipasangkan dengan asp kok, juga dipake sama wordpress.
  
  #yaddi
  sudah saya buat artikelnya di http://achmatim.net/2009/02/11/membuat-icon-external-link-secara-otomatis-dengan-jquery/
  Reply
1557 days ago

widik
Mantap infonya,
banyak pengetahuan baru disini.
Reply
1552 days ago

Prasetio
Wiiiiii..
Tambah lagi dong pak tutorial ttg jQuery.. saya jg lagi memperdalam ni.. hehehe kira2 ini ada materinya ga yah di matakuliah Desain Pemrograman Web 2

Prasetio’s last blog post..Adsense Sudah Support Western Union
Reply
1472 days ago

thegands
klo gak salah udah ada membuat library khusus ini bang. klo gak salah namanya yoyo jquery, yang membuat trent richardson

thegands’s last blog post..Flex TabNavigator Creationpolicy
Reply
1472 days ago

thegands
kalau tidak salah, library jquery ini udah ada yang buat. klo gak salah namanya jquery yoyo, di buat oleh trent richardson

thegands’s last blog post..Flex TabNavigator Creationpolicy
Reply
1160 days ago

Nightwalker Team
keren dah pak ..
abis dari http://www.jqueryui.com ,
trus /me nyantol deh di mari ..
huehuehue ..
Reply
942 days ago

boypeace
minta contoh pembuatan apilkasi data riwayat.. contohnya : tabel pegawai nip nama pangkat pendidikan tabel riwayat jabatan nip jabatan yang saya inginkan tabel pegawai terpisah dengan tabel jabatan.. karena dalam input riwayat jabatan masing pegawai berbeda bisa jadi riwayat jabatan lebih dari 10, dalam artian jabatan1, jabatan2—- jabatan10 bagaimana pembuatan dalam database-nya dan penerapan dalam script php. terima kasih
Reply