Membuat menu bertingkat (tree-Menu) dengan Dreamweaver

Menu atau navigasi adalah satu komponen penting website. menu merupakan papan petunjuk arah mau kemana kita akan menuju. Petunjuk arah yang baik dan jelas akan membawa pengunjung menelusuri website dengan nyaman, apabila petunjuk tersebut kurang baik dan kurang terorganisir maka potensi terbesar adalah kehilangan pengunjung. diawali dengan penutupan penelusuran web.

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.

kali ini saya akan share bagaimana membuat Tree-menu (menu bertingkat) menggunakan fasilitas yang sudah tersedia di  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.

    Gambar 2

    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.

    Gambar 3

    Gambar 3

    Gambar 4

    Gambar 4

  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.

    Gambar 5

    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.

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s