Buat Drop Down Menu

Widget tutorial kali ini penulis nak tunjukkan beberapa cara membuat dropdown menu atau pulldown menu.Fungsinya agar segala data,label,tajuk posting,kategori atau link dikumpulkan dalam satu ruangan.Nak cerita panjang, penulis tidak pandai.Terus kita kita tutorial ringkasnya.

1) Simple Dropdown Menu

Menu1 Menu2 Menu3

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

2) Dropdown Menu dengan Button

Menu1 Menu2 Menu3

<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="GO">
</form>

3) Dropdown Menu dengan button bergambar

Menu1 Menu2 Menu3

<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://alamat-url-gambar.com/jpg" border=0></a>
</form>

4) Dropdown Menu dengan Tajuk

Tajuk Utama Blog Tutorial Blog Widget Blog Info

<form><select name="menu" onchange="window.open
(this.options[this.selectedIndex]
.value,'_blank')" name="menu">
<option>Tajuk Utama</option>
<!-- change the links with your own -->
<option value="http://bloginfotips.blogspot.com/search/label/blog%20tutorial">Blog Tutorial</option>
<option value="http://bloginfotips.blogspot.com/search/label/widget">Blog Widget</option>
<option value="http://bloginfotips.blogspot.com/search/label/Info">Blog Info</option>
</select></form>

Note: Jangan lupa tukar kod yg bertanda merah dengan kepunyaan anda sendiri.Boleh pastekan kod Menu dropdown ini di post atau widet sidebar.Kod bertanda biru boleh ditukar mengikut kesesuaian anda.

Mungkin artikel dibawah yang sedang anda cari