Membuat Menu Dropdown

Buat sahabat yang sudah mepunyai banyak link di Blogroll, menu Dropdown ini bisa di jadikan alternatif untuk Blogroll supaya tidak memakan banyak halaman. Menu Dropdown atau Menu Pull-down merupakan kumpulan beberapa data ( berupa text dan link) yang di ringkas menjadi menu tunggal, Menu dropdown bisa dipakai sesuai kebutuhan Anda, selain bisa digunakan sebagai alternatif Blogroll , bisa juga anda gunakan untuk memuat banyak alamat Link ke situs tujuan. Dropdown menu ini bisa juga di buat untuk yangBlogging via ponsel. Berikut akan saya jelaskan cara pembuatannya.


Untuk membuat Dropdown standar

Menu1 Menu2 Menu3

Berikut adalah kodenya :

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

Untuk mebuat menu Dropdown dengan tombol

Menu1 Menu2 Menu3

Berikut ini adalah kodenya:

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

Dan untuk membuat menu Dropdown dengan Tombol gambar

Menu1 Menu2 Menu3

Kodenya adalah seperti ini :

<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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTC7aTHcp8P1bWlg7DvLSlKF2Y6Cz_ICt2Ffj2Ib1l0h_rAk6yHptWRzIrJ6Ztznb8MSJE28N_eogYElm8jfngFkFDPE-1Ds_z4Ldv0J-otOKMuJClbRsdpyiBK90XWKfD51hceEFpCZLc/s1600/views-24.png
"" border=0 ></a> </form>


Catatan : kode yang berwarna merah bisa diganti sesuai keinginan.
Dan yang warna biru adalah url gambar tombol. Anda bisa mendesainnya sendiri dan menguploadnya untuk mendapatkan url gambar.

Diposting oleh Nanang
POSTING BERKAITAN

TEMPLATE DESIGN BY
m-template | by:bagas96