result

Membuat Navigasi DropDown Menu

Category: By xvandal
Kali ini kita akan membuat dropdown menu untuk navigasi bar pada halaman web kita.Dropdown menu yang saya maksud adalah sebuah
menu layaknya menu pada pada menu bar yang apabila di klik akan mengeluarkan menu berikutnya secara vertikal , dan di dalam sub menu bisa di berikan menu lagi .
Tapi pada Kali ini akan akan menggunakan javascript dengan menggunakan quick menu . Quick menu dapat membuat dropdown menu tidak hanya vertikal , bisa juga horizontal ,
dan dapat pula di beri efek yang bagus ketika menu keluar , seperti efek box ,fade , slide , dan lainnya . Quick menu sebenarny sebuah tool yang terbuat dari script yang berbentuk html dan berbayar , tapi apabila seorang pembajak yang tidak mau membayar silahkan
ikuti langkah saya .

1. Download Quick menu disini.
2. Extract file tersebut dengan winrar.
3. Jalankan file yang bernama launch_qmv.html.Apabila muncul peringatan dibawah address bar yang berwarna kuning yang berbunyi "To help your security ,Internet Explorer has restricted ...........dan seterusnya".Klik kanan pada peringatan tersebut , lalu pilih "allow blocked content...".

4. Maka akan muncul halaman "Welcome To Visual CSS QuickMenu" . Lalu Klik "Launch Visual CSS QuickMenu".
5. Lalu akan muncul halaman baru tempat memilih template.Contoh kita memilih template yang bernama "Thick Sub Borders" . lalu kita klik dan akan keluar menu berikutnya . Disana kita dapat memilih warna dasar (kita dapat mengedinya nanti) ,menu struckture, font size , orientation , dan kita juga dapat memberikan efek animasi (saya memilih efek box).

6. Untuk Mengedit lebih lanjut klik "Costumize Menu" di sisi kanan bawah.
7. Untuk mengedit tampilan pada jendela sebelah kiri , untuk melihatnya pada jendela sebelah kanan .
8. Kita dapat mengatur warna dasar pada Style Type color , mengedit font pada Style Type font , boder dan lainnya , silahkan mengembangkan sendiri .

9. Kita dapat merubah nama menu dan linknya dengan mengklik kanan pada menu tujuan lalu pilih "edit text/url".
10.Untuk membuat menu silahkan klik kanan pada menu lalu pilih add item , untuk membuat sub menu klik kanan pada menu yang akan di jadikan parent , lalu pilih "add sub menu".
11.Untuk membuat dropshadow atau bayangan klik pada menu add-ons , lalu pilih drop shadows.
12.Untuk membuat pointer klik pada menu add-ons , lalu pilih pointer .Dan masih banyak pilihan lainnya untuk membuat quick menu seperti keyboard control , show delay ,on click , on mouse over dan lainya ,silahkan mengembangkan sendiri.dibawah ini hasilnya .
13.Untuk mengganti warna background klik pada gambar seperti di bawah ini .



14.Setelah selesai klik pada menu "file" , Lalu pilih "create component" .Select semua script lalu copy ke notepad . untuk anda yang menggunakan menu yang menggunakan gambar jangan lupa mempublish image dengan cara klik menu "file" lalu pilih "publish image".
15.Anda dapat langsung melihat hasilnya dalam bentuk html atau membuat lebih lanjut di dreamweaver . untuk melihat langsung , save as pada notepad yang sudah di copy script .Save as type pilih "all file" lalu berikan nama "namafile.html".lalu lihat hasilnya , bila efek tidak keluar lakukan seperti langkah 3.

Memasukan quick menu di blogspot .
1. Masuk ke Pengaturan , elemen halaman , lalu tambah gadget.
2. Pilih dasar , html/javascript ,.
3. Masukan script quick menu tadi dimulai dari <'style type="text/css"> sampai <'/script> yang terdapat di tag <'/body>

Mengedit menggunakan dreamweaver
1.Buka aplikasi dreamweaver.Lalu pilih create new html untuk membuat baru.
2.Buatlah tabel - tabel seperti tabel untuk header , body , footer , dan jangan lupa berikan tabek tersendiri untuk quick menu .
3.Setelah selesai pindah ke tab code , split , lalu masukan script mulai dari <'style type="text/css"> yang terdapat dibawah . Sampai dengan "<'/script>" diatas "<'/body>".
4.Cari script beruliskan "body style="margin:40px" , hapus script margin:40px.
5.Apabila anda tidak membayar Quick Menu maka akan selalu muncul alert kalau quick menu belum dibayar . Untuk menghilangkan alert tersebut , lakukan search pada semua script , cari semua tulisan yang bernama "eval" (tanpa tanda kutip) . Hapus semua yang bertuliskan eval jangan sampai tersisa .




 

0 comments so far.

Something to say?

Posting Komentar

Kalau ingin berkomentar paka saja akun anonim



Amazon