Seri Dream Weaver - Membuat Menu Bertingkat Tree Menu
Seri Dream Weaver - Membuat Menu Bertingkat Tree Menu
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.
1. Buka Macromedia Dreamweaver dan buatlah sebuah halaman HTML baru dengan
mengakses menu File > New.
2. Aktifkan window Behaviour melalui menu Window > Behaviours 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 behaviors 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’ seperti
terlihat di gambar 4 dan jika ingin mengatur posisi dari menu bisa mengaktifkan tab
‘Position’ seperti terlihat pada gambar 5. 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 6.
Kesimpulan
Tentang Penulis