membuat menu animasi dengan jquery

jqueryMembuat menu animasi dengan jquery
salah satu keunggulan jquery adalah "keleluesan" dan kemdahan nya kolaborasi dengan css(Cascading Style  Sheet) sehinnga penampilan halaman web semakin indah. selain itu JQUERY dapat mengatasi “kesenjangan” beberapa brouser dalam mengimplementasikan CSS. disisi lain, animasi diminati dalam dunia web karna menjadi salah satu perhatian/pemiat pengunjung . dalam tutorial kal ini, kita akan menambahkan efek animasi sederhana pada menu yang dibuat dengan css. kita akan memeanfaat kan fungsi animate()yang sudah disediakan olehjQuery.
kita coba langkah-langkah berikut
langkah ke 1
buat menu dengan tampilan list (<ul>). Tambahkan class dengan nama “menu” pada tag
    <ul>
    <ul class="menu">
    <li><a href="http://www.agusridwan67.blogspot.com</a></li>
    <li><a href="http://www.emailmeform.com/builder/form/jSsitKop444a">contact me</a></li>
    <li><a href="http:// agusridwan.67.blogspot.com /about">About Me</a></li>
    <li><a href="http:// agusridwan.67.blogspot.com /downloads">Downloads</a></li>
    <li><a href="http:// agusridwan.67.blogspot.com /friends">Friends</a></li>
    </ul>
langkah ke2:
salin kode css ini. dan letakan sebelum ]]</b:skin> atau<style>

pengaturan yang dilakukan dengan CSS di atas dapat di jelaskan secara singkat sebagai berikut:
atur tag menu <ul> dengann class menu yaitu margin 0 dari atas dan dari kiri serta 1em  dari bawah, lebarnya 125px (default100%) dan hilangkan bulet (titik) di dalam nya.
untuk setiap <li.di dalam <ul> atur margin di semua sisi menjadi 0 dan atur menu 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 ke 3
sertakan file jquery (download versi lengkap terakhir di http://jquery.com). dan tambahkan menu animasi seperti berikut


dengan jquery di atas,kita mengatur animsai di sebuah link (a) dalam menu dilewati mouse (mouse-over) dan juga yang terjadi pada saat sebaliknya (mouse keluar dari area  link).kita menggunaka fungsi hover()dengan dua paramenter.paramenter pertama (lihat baris 3-5) akan di jalankan pada saat mouse-over, dan paramenter kedua (baris 5-7)akan dijalankan pada saat mouse-out. Saat mouse-over, pertama - tama jquery akan menghentikan akan menghentikan animasi pada link dan fungsi stop(), selanjutnya menjalankan animasi dengan fungsi  animate()  dimana komponen  link  akan bergeser selebar  20  pixel dari sebelah kiri, animasi berlangsung secara cepat (fast). Sedangka saat  mouse-out, kondisi komponen  link  dikembalikan ke posisi  semula secara cepat (fast) pula.
jangan lupa coment ya dibawah ! untuk kemajuan blog ini ya
please

Related Posts:

0 Response to "membuat menu animasi dengan jquery"

Post a Comment

1.silahkan berkomentar sesuai posting yang di bahas.
2.kritik dan saran komentar pada blog ini
terimakasih