Membuat menu Drop Down

Menu ini digunakan untuk menyimpan link-link, tapi bisa juga digunakan untuk mengisi daftar menu lainnya sesuka Anda sebagai penggunanya. Bagaimana caranya untuk membuat menu ini? Jika sudah tidak sabar, ayo kita lirik bagaimana caranya…
Untuk membuatnya, Anda tinggal copy kode berikut:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,’_blank’)" size="1"> <option> – My Blogs – </option>
<!– Ganti Link dengan Milik Anda –>
<option value="http://die-silver.blogspot.com">http://die-silver.blogspot.com</option>
<option value="http://ardi33.web.id">http://ardi33.web.id</option>
</select></form>

Warna Merah adalah URL/Alamat Link
Warna Biru adalah Anchor Text/Tulisan yang akan tampil
Ganti tulisan berwarna dengan URL dan anchor text Anda. Untuk lebar, akan disesuaikan dengan tulisan yang paling panjang. Contoh lainnya adalah:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,’_blank’)" size="1"> <option> – Semua Blog yang Dimiliki Ardi33 – </option>
<!– Ganti Link dengan Milik Anda –>
<option value="http://die-silver.blogspot.com">http://die-silver.blogspot.com</option>
<option value="http://ardi33.web.id">http://ardi33.web.id</option>
</select></form>

Perhatikan Judul yang sudah saya ubah, saya sengaja mengubah judul lebih panjang supaya menu dropdown menjadi lebih lebar. Dan hasil kedua contoh tersebut adalah seperti di bawah ini:

Nah, untuk menyamakan lebar kedua menu di atas yang tidak sama, kita tinggal menambahkan kode style="width:250px" dan akan ditempatkan pada kedua menu dan penempatannya bisa Anda lihat pada data berikut:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,’_blank’)" size="1" style="width:250px"> <option> – My Blogs – </option>
<!– Ganti Link dengan Milik Anda –>
<option value="http://die-silver.blogspot.com">http://die-silver.blogspot.com</option>
<option value="http://ardi33.web.id">http://ardi33.web.id</option>
</select></form>

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,’_blank’)" size="1" style="width:250px"> <option> – Semua Blog yang Dimiliki Ardi33 – </option>
<!– Ganti Link dengan Milik Anda –>
<option value="http://die-silver.blogspot.com">http://die-silver.blogspot.com</option>
<option value="http://ardi33.web.id">http://ardi33.web.id</option>
</select></form>

Dan hasilnya dapat Anda lihat yaitu seperti ini:

Nah, tampak lebih rapi bukan? Mau tahu variasi lainnya yang bisa kita tambahkan? Variasi lainnya adalah membuat tulisan dan background di dalam menu tersebut. Anda hanya membutuhkan kode berikut ini untuk menghasilkan variasi ini:

style="width:250px;color:#ff0000;background:#B2DDFB"

Untuk keterangan, tulisan yang berwarna, tepatnya:

1. 250px menunjukkan lebar menu dropdown
2. #ff0000 menunjukkan warna tulisan
3. dan #B2DDFB menunjukkan backgroun menu

Untuk penempatannya seperti tadi, lebih jelasnya seperti di bawah ini…

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,’_blank’)" size="1" style="width:250px;color:#ff0000;background:#B2DDFB"> <option> – Semua Blog yang Dimiliki Ardi33 – </option>
<!– Ganti Link dengan Milik Anda –>
<option value="http://die-silver.blogspot.com" style="width:250px;color:#ff0000;background:#C3F4BD">http://die-silver.blogspot.com</option>
<option value="http://ardi33.web.id" style="width:250px;color:#ff0000;background:#CDDCE7">http://ardi33.web.id</option>
</select></form>