Cara Menghasilkan Santapan Pulldown Plus Tombol/Button

Pull down menu acap kali juga disebut selaku dropdown santapan atau jump menu. Disebut pull down alasannya merupakan list santapan akan timbul sehabis bab atas santapan diklik/ditekan, dan disebut pula dropdown santapan alasannya merupakan sehabis di-klik sederet list santapan akan timbul secara berurutan ke bawah.

Pull down menu/drop down santapan sungguh berharga untuk memperlihatkan list pilihan yang sungguh panjang alasannya merupakan sanggup memperpendek panjang halaman blog/web dan akan menghasilkan blog/web terlihat lebih mewah dan professional. Anda sanggup menggunakan santapan pull down ini untuk menyusun link-link blogrol, label, arsip, klasifikasi dan lain sebagainya.

Dalam peluang ini aku akan sedikit mengulas dan share ihwal cara menghasilkan drop down/pull down santapan plus button yang berbasis HTML form dan perintah fungsi javascript itu.

Secara mendasar, pulldown santapan merupakan rangkaian pilihan tag option di dalam selection yang seluruhnya dirangkum menjadi suatu form:

<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>

Dan akan tampil menyerupai ini:

Untuk memamerkan 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 list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
</form>

Akhirnya, tambahkan perintah javascript input button dan link option dikala di klik pada urutan sesuai identitas (name):

<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

Ups, alasannya merupakan apa yang terlihat di bab form merupakan nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text selaku pemberitahuan bagi hadirin ihwal isi santapan tersebut:

<option> -- Pilih Tutorial -- </option>

Berikut script lengkapnya:

<form name="lompat">
<select name="menu">
<option"> -- Pilih Tutorial -- </option>
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>

<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="GO">
</form>

Contoh implementasinya (sekalian chek the link):

Kostumisasi:

- Ganti -- Pilih Tutorial -- dengan text yang ingin dimunculkan pada baris paling atas santapan pull down.

- Ganti GO dengan kata/perintah lain yang lebih disukai.

Di blog blogger, anda sanggup dengan mudah memasangnya selaku widget/gadget.