Jumat, 17 Juli 2009

Membuat dropdown menu di Dreamweaver

Jaman dulu saya pernah membuat link dropdown menu dari Scratch (cakaran hasil liat2x script di-google).. tapi seiring padatnya kesibukkan saya… (halahh… sibuk koq masih sempet2xnya nge-blog :) ) ngga mungkin lagi buat googling script satu persatu.. dengan bantuan Dreamweaver kesibukkan saya googling script drop down menu bisa dipangkas… hehehhehehe…

drop down script ini biasanya menggunakan javascript dalam pembuatannya.. nahh , kebayangkan proses bikinnya supaya ter-integrasi sama link-nya.. berkat bantuan Dreamweaver kita gak perlu lagi pusing integrasi-in javascript ke html maupun buang waktu googling.. sehingga waktu kerja kita dapat difokuskan pada hal-hal yang lebih urgent seperti : Mikirin alokasi THR , Mikirin rencana liburan yang jauhh :D …hehehhehe <- ngaco nihh ! becanda dink… oh , iyaa teknik di dreamweaver ini saya tes di dreamweaver mx, mx 2004 , 8 dan cs3 berjalan dengan lancar… sebelumnya anda siapkan dulu link-link menu yang mau kita tambahin dropdown-nya.. Versi sederhana-nya bisa di copas berikut ini : HOME | ABOUT | CONTACT

Nahh kalo sudah disave dulu aja… lalu blok link yang mau kita tambahin dropdown-nya terus perhatikan panel behaviors di sebelah kanan . kalo belom muncul aktifkan saja dahulu (ctrl+f4).. teruskan dengan meng-klik tanda ‘+’ di behaviors

begitu keluar menu slide … pilih aja ‘Show Pop-up Menu’

Nanti akan muncul window ’show popup menu’ dengan tab yang berisi berbagai config parameter yang simple…
Tab Contents

berisi list dari menu dropdown link yang anda buat… seperti link2 pada umum-nya parameter yang tersedia antara lain nama link yang kan ditampilkan, target window setelah di klik dan beberapa modifikasi :

Tanda + dan - : menambah list dari drop down

Tanda Indent link : mengatur link menjadi main menu atau sub menu

Tanda urutan : mengatur urutan list dari drop down anda
Tab Appearance

Mengatur tampilan yang muncul saat dropdown aktif, disini anda dapat mengatur pilihan warna, font, alignment dari tampilan drop down anda..
Tab Advanced

Sama seperti tab Appearance.. anda dapat mengatur tampilan dropdown anda lebih lanjut..
Tab Position

Tab ini mengatur posisi/letak drop down anda pada saat mouse over aktif.. Tersedia tampilan letak: bawah kanan, bawah persis, atas persis dan atas kanan..

Menu Check : Hide Menu On OnmouseOut sebaiknya di centang… dengan begitu drop down anda hilang jika mouse tidak berada di atas link dan hanya akan aktif pada link yang bersangkutan…

save-as… lalu preview aja hasilnya (F12)…

Selamat berkreasi lebih lanjut… Thx atas perhatiannya keep Reading..

Bye