Membuat Menu Dropdown Dan Variasinya
Apakah kalian sudah tahu apa itu Dropdown menu? saya harap kalian sudah mengetahuinya. Bentuknya seperti ini:
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>
<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>
<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>
<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>
<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:
- 250px menunjukkan lebar menu dropdown
- #ff0000 menunjukkan warna tulisan
- 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>
<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:
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!!!
 |
6
komentar
:a:
:b:
:c:
:d:
:e:
:f:
:g:
:h:
:i:
:j:
:k:
:l:
:m:
:n:
6 komentar:
wekz....
makasih kak infonya...
aku nyari" lum dapet nhe...
aku coba dech...
^^
kak lau mau ada judulnya gmn...
misalnya:
::A::
akane
agito
::B::
ben-ben
dst......
tu gmn...
ditunggu jawabannya secepatnya...
^^
tinggal diganti aja kan judulnya?
yang dipake di tutorial ini kan pake judul:
- Semua Blog yang Dimiliki Ardi33 -
Tinggal ganti aja...
:a:
tetep gagaaal (kira2 apa ya yang salah???)...tapi anyway blog nya kerrrreeen...
:n: nanti ajarin aku bikin blog sekeren ini yaaaa
NB:
tukeran link yu,,,(tetteeeep :g: )
hehe..oke..dengan senang hatiii
Posting yang bagus, namun gimana kalau ada sebuah button yang mengeksekusi link yang ada dalam dropdown sehingga membuka jendela browser baru dengan alamat url yang ada di dropdown.
mohon contoh scriptnya ya..
makasih
linggo