Stylish dan halus animasi menu dengan jQuery

Hari ini saya akan menunjukkan sesuatu yang menarik dengan jQuery. Kemarin saya sedang memikirkan sesuatu untuk menulis sesuatu pemrograman hal terkait di blog untuk waktu yang lama dan saya datang di website yang menu terkesan saya banyak. Tapi diperiksa sementara, saya menemukan bahwa itu dibangun menggunakan Mootools. Seperti itu di Mootools, saya pikir untuk mengulang di jQuery. Aku punya dua contoh menu serupa, pertama dengan bantuan CSS dan jQuery inti dan lain menggunakan jQuery plugin untuk meringankan efek rebound di sama menu.and saya menambahkan satu lagi contoh bahwa kita juga akan bagus untuk menampilkan menu Anda.

View demo

Pertama, mari saya mulai dengan gambar saya telah digunakan. di latar belakang untuk membuat dua pertama menu

Halus menu jQuery dan  menu jQuery stylish

Perlu diketahui bahwa gambar di tangkapan kiri sebagai besar. mungkin tentang menu teks bisa panjang

Sekarang, mari kita lihat kode HTML

Kode HTML untuk jQuery menu animasi

& amp; amp; lt; Class ul = “nav” id = “NAV1” & amp; amp; gt; & Amp; Amp; lt; li class = “pertama” & amp; amp; gt; & Amp; Amp; lt; a href = “#” & amp; amp; gt; Home & amp; lt; / A & amp; amp; gt; & Amp; Amp; lt; / Li & amp; amp; gt; & Amp; Amp; lt; Li & amp; amp; gt; & Amp; Amp; lt; a href = “#” & amp; amp; gt; Portofolio & amp; amp; lt; / A & amp; amp; gt; & Amp; Amp; lt; / Li & amp; amp; gt; & Amp; Amp; lt; Li & amp; amp; gt; & Amp; Amp; lt; a href = “#” & amp; amp; gt; Tentang Kami & amp; amp; lt; / A & amp; amp; gt; & Amp; Amp; lt; / Li & amp; amp; gt; & Amp; Amp; lt; Li & amp; amp; gt; & Amp; Amp; lt; a href = “#” & amp; amp; gt; Hubungi Kami & amp; amp; lt; / A & amp; amp; gt; & Amp; Amp; lt; / Li & amp; amp; gt; & Amp; Amp; lt; Li & amp; amp; gt; & Amp; Amp; lt; a href = “#” & amp; amp; gt; Blog & amp; amp; lt; / A & amp; amp; gt; & Amp; Amp; lt; / Li & amp; amp; gt; & Amp; Amp; lt; Li class = “terakhir” & amp; amp; gt; & Amp; Amp; lt; a href = “#” & amp; amp; gt; Tutorial & amp; amp; lt; / A & amp; amp; gt; & Amp; Amp; lt; / Li & amp; amp; gt; & Amp; Amp; lt; li class = “bg” & amp; amp; gt; & Amp; Amp; lt; div class = “kiri” & amp; amp; gt; & Amp; Amp; lt; / Div & amp; amp; gt; & Amp; Amp; lt; / Li & amp; amp; gt; & Amp; Amp; lt; / Ul & amp; amp; gt;

Semua elemen yang terdaftar cukup sederhana dan daftar kelas “ bg ” adalah pemegang menu background. Kode adalah sama untuk pertama dan kedua contoh, tapi untuk contoh ketiga, kita menggunakan daftar kelas WTS bukan bg