Membuat Menu Bertingkat (Tree Menu) dengan Dreamweaver
Menu atau navigasi merupakan komponen penting di dalam suatu website. Navigasi website sama halnya dengan navigasi sebuah kapal laut, dimana sistem navigasi yang baik tentu akan menuntun nahkoda kapal beserta seluruh penumpangnya menuju ke tujuan dengan cepat. Sebaliknya, navigasi yang buruk bukan tidak mungkin akan membuat kapal terlambat menuju ke tujuan atau bahkan tersesat di tengah laut. Navigasi di dalam website pun akan sama, yaitu jika dirancang dengan baik akan memudahkan pengunjung untuk menemukan apa yang ia cari. Namun jika navigasi tidak dirancang dengan baik atau bahkan tidak ada navigasi sama sekali, dapat mengakibatkan pengunjung tersesat dan akhirnya akan menutup website tersebut.
Dilihat dari bentuk dan susunannya, menu atau navigasi memiliki variasi yang beragam. Ada beberapa navigasi yang disusun mendatar (horizontal), ke bawah (vertical), berbentuk drop-down menu atau dapat juga berupa menu bertingkat (tree-menu). Berdasarkan teknik pembuatannya juga beragam, dari yang menggunakan HTML, CSS, Javascript, gambar sampai yang menggunakan teknologi flash. Masing-masing memiliki kelebihan dan kekurangan.

Di dalam tutorial ini akan disampaikan mengenai bagaimana membuat menu bertingkat (tree-menu) menggunakan fasilitas yang sudah tersedia di salah satu web development software, yaitu Dreamweaver. Langkah-langkah dalam tutorial dicoba menggunakan Macromedia Dreamweaver 8, namun demikian dapat juga dicoba dengan versi-versi terbaru dari Dreamweaver.


Berikut ini langkah-langkahnya
1. Buka Macromedia Dreamweaver dan buatlah sebuah halaman HTML baru dengan mengakses menu File > New.
2. Aktifkan window Behaviors melalui menu Window > Behaviors atau dengan shortcut Shift + F4 (Lihat gambar 1)
3. Buatlah sebuah link dengan text atau gambar, isi halaman tujuan link dengan # yang menandakan bahwa link tersebut jika diklik nantinya akan tetap di halaman yang sama. Sorot (select) link tersebut, kemudian dari window behaviors yang telah diaktifkan di langkah sebelumnya klik tombol Add behaviour yaitu icon dengan tanda [+]. Akan ditampilkan beberapa pilihan behaviour dan pilih Show Pop-Up Menu. Lihat gambar 2.

4. Selanjutnya akan ditampilkan window Show Pop-Up Menu. Buatlah menu bertingkat sesuai rancangan menu yang diinginkan. Tersedia beberapa tombol yang akan membantu mengatur menu yang akan dibuat. Lihat contohnya di gambar 3. Jika ingin mengatur tampilan dari menu, dapat membuka tab ‘Appearance’ dan jika ingin mengatur posisi dari menu bisa mengaktifkan tab ‘Position’ seperti terlihat pada gambar 4. Klik tombol OK jika menu sudah diatur sesuai keinginan.



5. Simpan halaman dan tampilkan hasilnya di browser dengan mengakses menu File > Preview in browser… atau shortcut F12. Contoh tampilan menu terlihat di gambar 5.

Kesimpulan
Membuat menu bertingkat (tree-menu) dengan menggunakan Macromedia Dreamweaver ternyata sangat mudah. Teknik yang digunakan oleh Dreamweaver dalam membuat menu tersebut adalah dengan javascript, sehingga menu akan ditampilkan dengan baik pada browser yang mendukung javascript.
Semoga tutorial singkat ini bermanfaat untuk kita semua.

aman 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 …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
posted by Dini Shanti on May 26
Hari ini lagi ngerjain design untuk salah satu web baru ku, dan design nya tuh headernya full lebar screen gitu…
Ini ya, kode buat headernya:
#header {
position:absolute;
left:0;
top:0;
width:100%;
}
Dan letak kode headernya, di luar bagian yang lebarnya ditentukan (fix width) yaa.., misalnya:

… isi header

… isi content yang fix width