Cara Membuat Menu Pulldown Plus Tombol/Button

Follow @Sederhana_Blog

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 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 seperti ini: 

                    

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 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 ketika di klik pada urutan sesuai identitas (name):

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

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 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! 

Please Share it! :)

Kindly Bookmark this Post using your favorite Bookmarking service: