Social Icons

facebook google plus email

Tuesday, February 28, 2012

Membuat Menu Dropdown Superfish Dengan CSS Dan JQuery

Share on :
Pentingnya menu sebagai navigasi dari sebuah web ada sesuatu hal yang wajib, agar mempermudah pengguna website dalam menemukan konten yang dicari. Posting kali ini saya akan membagi cara membuat menu drop down menggunakan CSS dan JQuery. Atas request seorang teman, tampilan menu yang akan saya buat bernuansa hitam.

Seperti biasa, untuk mempermudah anda, saya telah menyiapkan paket seluruh bahan yang dibutuhkan untuk membuat menu dropdown ini, anda cukup mendownloadnya Disini.  Tapi tidak ada salahnya saya membagikan cara membuatnya. Silakan anda lihat demonya Disini.

Langkah pertama dan seperti biasanya lagi, buat tiga buah folder / directory berikut ini :

  • js (letakkan seluruh file *.js didalamnya)
  • css (letakkan seluruh file *.css didalamnya)
  • images (letakkan seluruh image pendukung didalamnya)
Langkah selanjutnya membuat script HTML untuk menampilkan menu yang akan kita buat. Buka text editor yang biasa anda gunakan (minimal notepad) lalu copy paste script dibawah ini, atau jika anda sudah punya disain web, dan anda ingin memasang menu dropdown, silakan buka coding web anda, kemudian sisipkan script berikut ini sesuai dan sesuaikan dengan letak pada web anda.



Anda tinggal menyesuaikan link pada perintah <a href="......">.....</a> dengan url link web anda.
Jika anda tidak menyukai warna menu yang saya buat, dan anda ingin mengganti sesuai dengan selera anda, cukup anda buka superfish.css yang berada pada folder/directory css kemudia edit warna sesuai keinginan anda. Perhatikan gambar dibawah ini, dsini bagian inilah kita dapat memainkan warnanya :


Anda bisa menggunakan Adobe Photoshop untuk mendapatkan kode warna, silakan anda utak-atik sendiri sesuai keinginan anda.


Selamat Mencoba......


Share on :
Share

Lihat Juga Yang Berikut Ini :



Special Tips :

0 komentar:

Post a Comment

Aturan Dalam Berkomentar :

1. Silakan Berkomentar Dengan Baik Dan Sopan.
2. Mohon Untuk Tidak Mencantumkan Link Aktif Pada Komentar.
3. Mohon Untuk Tidak Promosi Produk Disini (Dianggap Spam).
4. Bila Komentar Tidak Sesuai Aturan Diatas Maka Komentar Akan Saya Hapus.

<-- Thank's -->