Membuat Menu Dropdown Dan Variasinya

Apakah kalian sudah tahu apa itu Dropdown menu? saya harap kalian sudah mengetahuinya. Bentuknya seperti ini:

- My Blogs -

http://die-silver.blogspot.com

http://ardi33.web.id

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:

- My Blogs -

http://die-silver.blogspot.com

http://ardi33.web.id

- Semua Blog yang Dimiliki Ardi33 -

http://die-silver.blogspot.com

http://ardi33.web.id

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:

- My Blogs -

http://die-silver.blogspot.com

http://ardi33.web.id

- Semua Blog yang Dimiliki Ardi33 -

http://die-silver.blogspot.com

http://ardi33.web.id

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>

Dan hasilnya akan terlihat seperti ini:

- Semua Blog yang Dimiliki Ardi33 -

http://die-silver.blogspot.com

http://ardi33.web.id

Bagaimana untuk yang satu tadi? Jadi lebih bagus lagi bukan? Pusing saya membuat posting ini, terlalu banyak kode-kode :)) hehe... Tapi kalau ada kemauan Pasti Bisa!!!

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Gunakan Tombol berikut untuk menyimpan halaman :
Membuat Menu Dropdown Dan Variasinya
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..