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.

    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.

Download Tutorial

  1. Direct download
  2. Download melalui link alternatif 1
  3. Download melalui link alternatif 2
  4. Download melalui link alternatif 3
  5. Download ebook dreamweaver dan banyak ebook lainnya kunjungi http://ebook.achmatim.net
Berbagi itu indah...Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Digg this

31 comments

  1. pak, saya membuat website dimana menunya menggunakan tree menu, tapi setelah saya hosting ke domain, menu treenya tidak muncul. mungkin karena javascriptnya. bagaimana solusinya pak, trim’s

  2. mohon contoh macromedia + Dreamaweaver 1.Membuat form login 2.Membuat form stock barang Jumlah barang masuk – keluar nilai total automatic ? terima kasih, banyak document disini yg saya bisa pelajari tentang php, terima kasih, smoga amal tentang penulis akan berlimpah …. amien

  3. saya telah membaca artikel anda, maksudnya dikasih tanda # (pagar) itu dimananya ya ? langkah-langkahnya sudah saya ikuti cuma setelah saya tampilkan pada internet explore menu pop-up nya tidak muncul.tolong info nya…makasih.

  4. dari langkah2 membuat menu popup pada dreamweaver 8, pada behaviour show menu popup tidak bisa di klik. saya sudah buat file baru html. tolong bantuannya. terima kasih

  5. Wah makasih banget gan, saya sangat terbantu dengan tutorial ini.
    Setelah melalui trial and error, akhirnya sukses juga mempraktekkan tutorial ini gan. Sekali lagi makasih banyak gan.

  6. selamat malam pak…
    mohon diupload kembali tutorialnya karena linknya sudah rusak pak.
    thx.
     
    salam kenal.

  7. Pak , saya memakai dreamweaver 8, lalu saya coba masukin menu pop-up, setelah saya tekan ok kok malah keluar penringatan seperti error pak itu kenapa ya?

Leave a Reply

Your email address will not be published. Required fields are marked *