Dropdown Menu menggunakan List Menu

3 Aug 2009

list

Beberapa waktu yang lalu pernah terpikir oleh w bagaimana membuat Menu menggunakan List Menu, dimana ketik kita memilih salah satu menunya akan tereksekusi langsung.. w berfikir untuk menggunakan PHP tapi rasanya tidak mungkin, w coba Googling, ternyata scriptnya rumit banget,,, ternyata setelah w bereksperimen, menggunakan Javascript tentunya, ternyata tidak terlalu sulit… nah maka dari itu w pengen berbagi sama kalian, ternyata membuat Dropdown menumenggunakan List Menu tidaklah susah, oke langsung aja gini scriptnya…

Nah ini letakan di Head Aja…

<script>
function pil_menu() {
if(document.forms["pilih"].menu.value!=”pilih”) {
var alamat = document.
forms["pilih"].menu.value;
location.href=’alamat’;
}
}
</script>

Sekarang kita buat list menunya sebagai form menu, tentu aja di letakan di body…

<form name=’pilih’>
<select name=’menu’ onchange=’pil_menu()’>
<option value=’pilih’>Pilih</option>
<option value=’http://www.google.com’>Google</option>
<option value=’http://www.facebook.com’>Facebook</option>
<option value=’http://www.youtube.com’>Youtube</option>
<option value=’http://www.ilmuwebsite.com’>IlmuWeb</option>
</select>
</form>

Nah.. gampangkan, tapi kalo kalian masih bingung, w jelasin lagi scriptnya, gini aja biar gampang..

function pil_menu() {
Pertama kita buat fungsi pil_menu(), untuk digunakan di Eventhandler pada select menu

if(document.menu.value!=”pilih”) {

Disini dibuat validasi, kalo nilai dari menu tidak sama dengan “pilih”, artinya belum dipilih URLnya..

var alamat = document.menu.value;

Nah kalo yang ini buat ngambil value dari nilai setiap menu, kalo kalian pilih Google maka valuenya http://www.google.com, ini akan dijadikan alamat tujuan.

location.href=’alamat’;
Yang ini proses yang terakhir, setelah kita dapet alamat tujuan kalian akan dialihkan ke alamat tersebut di baris yang ini…

dan yang gak kalah pentingnya kalian harus sisipkan fungsinya di onchange=’pil_menu()’, ketika kalian memilih atau mengubah pilihan kalian dari list menu tersebut maka fungsi pil_menu() akan di jalankan…

Waahh kayaknya gampang banget kan.. w yakin kalian juga pasti cepet ngerti kok.. btw mungkin itu aja yg w pengen kasih tau mudah mudahan ini dapat bermanfaat buat kalian serta dapat menjadi referensi yang berguna buat kalian, dan w masih menunggu saran, komentar, kritik atau apapun asalkan bukan spam :).. ok see you later,,,


TAGS tutorial javascript


-

Author

Follow Me