MODUL 3

MENU DROP DOWN

I. TUJUAN PRAKTIKUM

Peserta Praktikum dapat memahami dan mengimplementasikan menu Drop Down

II. TUGAS PENDAHULUAN

1. Jelaskan kelebihan dan kekurangan menu drop down dengan menggunakan jump

menu, navigasi tabel dan Spry Menu Bar ?

2. Sebutkan dan jelaskan menu-menu yang termasuk dalam Spry?

III. LANDASAN TEORI

Menu dropdown adalah menu yang ketika di klik / ditunjuk akan menampilkan sub

menu di bawahnya. Jenis menu drop down antara lain :

- Jump Menu merupakan menu berbentuk Dropdown (combo box). Jump menu

biasanya digunakan untuk navigasi cepat.

- Navigasi tabel, menu / navigasi dengan memanfaatkan tag <table> untuk mengatur

item navigasi dan tampilannya. Macromedia Dreamweaver menyediakan beberapa

bentuk navigasi tabel siap-pakai (snippets).

- Spry menu bar digunakan untuk membuat menu bertingkat (tree). menu yang dibuat

dapat ditampilkan atau disembunyikan berdasarkan aksi dari pointer mouse. Spry

menu bar dapat ditampilkan dalam bentuk vertikal atau horisontal. Spry ini

merupakan library JavaScript yang dapat digunakan untuk mendesain halaman web,

seperti membuat menu bar, textarea, text field, dan lain sebagainya dengan hasil yang

lebih menarik

IV. PRAKTIKUM

1. Menambahkan Jump Menu

Langkah-langkah untuk membuat jump menu antara lain :

a. Pilih menu Insert > Form > Jump Menu, sehingga muncul tampilan sebagai

berikut:

1

b. Masukkan item menu, teks menu, links dan pilihan menu.

c. Klik OK, hasil dari jump menu seperti ditunjukkan pada gambar berikut:

2. Navigasi dengan Tabel

Langkah-langkah untuk membuat navigasi dengan tabel sebagai berikut:

a. Pilih Window > Snippets seperti tampilan berikut :

2

b. Pada panel Snippets (panel yang berada di sebelah kiri) , pilih Vertical > klik Insert

c. Kemudian akan muncul tampilan berikut :

Ubah tulisan di dalam menu sesuai dengan yang diinginkan.

3. Membuat Spry Menu Bar

Langkah-langkah untuk membuat spry menu bar antara lain:

a. Klik Insert > Spry > Spry Menu Bar

b. Pilih menu pilihan Layout , Pilih Horizontal

3

c. Klik OK

d. Ubah item untuk parent, children, grand children dan Link seperti pada gambar

berikut :

V. KESIMPULAN

- Menu dropdown adalah menu yang ketika di klik / ditunjuk akan menampilkan sub

menu di bawahnya.

- Jenis menu drop down : Jump menu, navigasi dengan tabel dan spry menu bar.

VI. TUGAS PRAKTIKUM

Tugas praktikum akan diberikan oleh asisten praktikum pada saat kegiatan praktikum.

4