Membuat Tampilan Menu Slide Menggunakan CSS dan jQuery

Dalam membuat sebuah tampilan website yang lebih menarik menggunakan jQuery banyak sekali cara yang dapat kita lakukan seperti kita memberikan efek images slider, efek Images pada Gallery dan kita bisa juga memberikan efek slide pada menu/navigasi website kita agar terlihat seperti slide saat di hover pada menu tersebut. Nah pada tutorial kali ini saya akan ajarkan bagaimana cara membuat tampilan menu/navigasi seperti slide saat di hover menggunakan CSS dan jQuery. Langsung saja kita masuk ke pokok pembahasanya.

Bahan yang perlu di siapkan adalah :

1.       Plugin jQuery.js

2.       Plugin jQuery slide-menu.js

3.       Backgroud Image Pattren.

Pertama buatlah struktur HTML nya di dalam tag Body seperti di bawah ini :

Setelah kita membuat file HTML nya kita buat file CSS nya seperti di bawah ini :

Panggil file jQuery di file HTML nya seperti di bawah ini:

Setelah semuanya di buat dan file jQuery nya di gabungkan  dengan benar maka coba lihat hasilnya.

Sekian dulu tutorial dari saya selamat mencoba teman-teman…

Untuk melihat hasilnya di SINI dan DOWNLOAD source codenya.