DhikaDwiPradya.com – Menu dropdown adalah serangkaian list menu yang tampil secara berurutan karena adanya proses klik. Kelebihan dari menu dropdown ini yaitu mengurangi tampilan list menu yang sangat panjang pada blog/web anda.
Menu dropdown ini sangat bermanfaat bagi blog/web yang sudah mempunyai ratusan artikel/daftar isi, karena akan meminimalisir penggunaan tempat pada blog/web tersebut.
Jika menu yang terdapat pada web tersebut hanya ada kisaran 10 sampai 20, mungkin tidak jadi masalah. Akan tetapi jika menu tersebut berkisar hingga ratusan item, mungkin ini yang menjadi masalah, karena tentunya bentuknya akan memanjang hingga ke bawah, dan akan sangat mengganggu dari segi tampilan blog/web yang membuat repot para pengunjung blog tersebut.
Contoh tampilan menu sebelum dan sesudah memakai menu dropdown adalah seperti berikut:
Gambar sebelum menggunakan menu dropdown
Gambar sesudah menggunakan menu dropdown
Dari kedua gambar di atas sangatlah terlihat perbedaannya antara sebelum dan sesudah memakai menu dropdown. Tentunya akan sangat memperindah tampilan blog/web anda.
Pada kesempatan kali ini, saya akan membahas tentang cara membuat menu dropdown dengan html. Berikut ini adalah listing programnya:
<form name=”daftarisi”>
<select name=”menu” style=”width:180px”>
<option selected> — Pilih Artikel — </option>
<option value=”url link menu 1″>Menu 1</option>
<option value=”url link menu 2″>Menu 2</option>
<option value=”url link menu 2″>Menu 2</option>
</select>
</form>
Keterangan:
- form name dapat diubah sesuai keinginan
- select name dapat diubah sesuai keinginan
- url link menu 1 diisi dengan link yang akan anda kaitkan.
- Menu 1 dapat diubah sesuai keinginan
Hasil tampilan dari listing di atas adalah seperti berikut:
Jika anda klik salah satu dari menu tersebut, maka tidak akan terjadi apa-apa karena belum adanya sebuah perintah pada link yang sudah anda input. Langkah selanjutnya, masukkan listing berikut:
<input type=”button” onClick=”location=document.daftarisi.menu.options[document.daftarisi.menu.selectedIndex].value;” value=”OK”
Sehingga listing keseluruhan menjadi seperti berikut:
<form name=”daftarisi”>
<select name=”menu” style=”width:180px”>
<option selected> — Pilih Artikel — </option>
<option value=”url link menu 1″>Menu 1</option>
<option value=”url link menu 2″>Menu 2</option>
<option value=”url link menu 2″>Menu 2</option>
</select><input type=”button” onClick=”location=document.daftarisi.menu.options[document.daftarisi.menu.selectedIndex].value;” value=”OK”
</form>
Silahkan anda gunakan listing tersebut pada blog/web anda agar tampilan blog/web anda menjadi terlihat lebih profesional. Semoga artikel ini bermanfaat bagi para pembaca.
Baca artikel lain:
Leave a Reply