Translate this page from Indonesian to the following language!
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Chinese Simplified Arabic

Sunday, December 27, 2009

Membuat Menu DropDown

Waktu saya lagi berkunjung di blog milik O-om, saya menemukan sebuah artikel mengenai menu DropDown. Dari situ saya mencoba untuk memposting artikel ini supaya dapat dibaca oleh anda semua yang saya kutip dari blog milik O-om. Dimulai dari pengertian terlebih dahulu, menu DropDown atau menu Pull-Down merupakan kumpulan dari beberapa kategori, link, dan berbagai macam tulisan yang dimasukkan kedalam sebuah menu. Jika menu tersebut di klik, maka akan muncul kategori-kategori yang dikelompokkan tersebut. Menu ini juga dapat kita gunakan sesuai dengan kebutuhan kita. Misalnya untuk membuat Blogroll Alternatif dan memasukkan banyak alamat link ke situs yang akan kita tuju.

Bingung yah..?!
Yauda kalo gitu langsung aja ke prakteknya...
=D

Menu DropDown Standar







<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="
http://alamat-url1.com">Menu1</option>
<option value="
http://alamat-url2.com">Menu2</option>
<option value="
http://alamat-url3.com">Menu3</option>
</select>
</form>



Menu DropDown Dengan Tombol







<form name="jump">
<select name="menu">
<option value="
http://alamat-url1.com">Menu1</option>
<option value="
http://alamat-url2.com">Menu2</option>
<option value="
http://alamat-url3.com">Menu3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="OK">
</form>



Menu DropDown Dengan Gambar








<form name="jump">
<script>
function jumpMenu(){
location=document.jump.menu.options[document.jump.menu.selectedIndex].value;
}
</script>
<select name="menu">
<option value="
http://alamat-url1.com">Menu1</option>
<option value="
http://alamat-url2.com">Menu2</option>
<option value="
http://alamat-url3.com">Menu3</option>
</select>
<a href="Javascript:jumpMenu()"><IMG SRC="
http://oom.blog.googlepages.com/Go.gif" border=0></a>
</form>



Catatan :
- Kode yang ditandai warna
Merah bisa diganti sesuai dengan keinginan anda.