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">Contoh implementasinya (sekalian chek the link):
<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>
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 . . .
sumber : buka-rahasia.blogspot.com
Tidak ada komentar:
Posting Komentar