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

<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


<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


<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

<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



1 comments:

AKURO SAN berkata...

tutorial menarik ! ;)

:)) ;)) ;;) :D ;) :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Catat Ulasan

Komenlah sesuka hati anda kerana tuan empunya blog ini buta hati dan buta perasaan tetapi tidak buta mata.

 

Pelawat

free counters
BlogInfoTips

Pengikut

Recent Comments

Powered by Deenoh

© Copyright 2007-2009. Blog tutorial . All rightsreserved | Bloginfotips.com is proudly powered by Blogger.com | Template redesign by Deenoh