Cara Membuat Menu Pulldown Plus Tombol/Button

Pull down menu seringkali juga disebut sebagai dropdown menu atau jump menu. Disebut pull down alasannya yaitu list menu akan muncul setelah bab atas menu diklik/ditekan, dan disebut pula dropdown menu alasannya yaitu 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 alasannya yaitu 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 aku akan sedikit mengulas dan share wacana cara membuat drop down/pull down menu plus button yang berbasis HTML form dan perintah fungsi javascript itu.

Secara mendasar, pulldown menu merupakan rangkaian opsi tag option di dalam selection yang semuanya dirangkum menjadi sebuah form:

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

Dan akan tampil menyerupai ini:

Untuk memperlihatkan 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>

Nama List 1 Nama List 2 Nama List 3

Akhirnya, tambahkan perintah javascript input button dan link option saat 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 yaitu apa yang tampak di bab form yaitu nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text sebagai informasi bagi pengunjung wacana isi menu 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):

-- Pilih Tutorial -- General Blogging Blog Writing HTML-CSS Tricks Blog Design

Kostumisasi:

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

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

Di blog blogger, anda dapat dengan mudah memasangnya sebagai widget/gadget.

Dashboard > Design/Rancangan > Add a Gadget/ Tambah Gadget > HTML/Javascript

That's it. Have fun!
mencuri yaitu pekerjaan pengecut! © buka-rahasia.blogspot.com