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
Menu DropDown Dengan Tombol
Menu DropDown Dengan Gambar
Catatan :
- Kode yang ditandai warna Merah bisa diganti sesuai dengan keinginan anda.
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>
<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>
<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>
<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.
- Labels: Tutorial Blogger
