Selasa, 11 September 2012

Membuat Menu Pulldown plus Button/Tombol


Pull down menu seringkali juga disebut sebagai dropdown menu atau jump menu. Disebut pull down karena list menu akan muncul setelah bagian atas menu diklik/ditekan, dan disebut pula dropdown menu karena setelah di-klik sederet list menu akan muncul secara berurutan ke bawah. 
Pull down menu/drop down menu sangat bermanfaat untuk menampilkan list pilihan yang sangat panjang karena dapat memperpendek panjang halaman blog/web dan akan membuat blog/web tampak lebih elegan dan professional. Anda dapat menggunakan menu pull down ini untuk menyusun link-link blogrol, label, arsip, kategori dan lain sebagainya.

Dalam kesempatan ini saya akan sedikit mengulas dan share tentang cara membuat drop down/pull down menu plus button yang berbasis HTML form dan perintah fungsi javascript.

Secara mendasar, pulldown menu merupakan rangkaian tag option di dalam selection yang semuanya dirangkum menjadi sebuah form :
<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>
Untuk memberikan isi atau list menu, tambahkan value dan anchor text pada tag option, identitas fungsi (name) pada selection, dan fungsi form :
<form name="lompat">
<select name="menu">
<option value="url link 1">Nama 1</option>
<option value="url link 2">Nama 2</option>
<option value="url link 3">Nama 3</option>
</select>
</form>
Akhirnya, tambahkan perintah javascript input button dan link option ketika di klik pada urutan sesuai identitas (name):
<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="Cari">
Ups, karena apa yang tampak di bagian form adalah nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text sebagai informasi bagi pengunjung tentang isi menu tersebut:
<option> .. Pilih Daftar .. </option>
Berikut script lengkapnya:
<form name="lompat">
<select name="menu">
<option"> .. Pilih Daftar .. </option>
<option value="url link 1">Nama 1</option>
<option value="url link 2">Nama 2</option>
<option value="url link 3">Nama 3</option>
</select>
<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="Cari">
</form>
 Contoh implementasinya (sekalian chek the link):
Kostumisasi:
- Ganti .. Pilih Daftar .. dengan text yang ingin dimunculkan pada baris paling atas menu pull down.
- Ganti Cari dengan kata/perintah lain yang lebih disukai.
Terima Kasih . . .

Tidak ada komentar: