Cara Membuat Menu Naik Turun (Drop Down Menu)

DropDown Menu atau menu dropdown adalah menu yang berisikan link yang bisa digunakan untuk link yang mengarah ke blog kita maupun ke web lain.
bisa kita gunakan untuk tempat friends list atau kumpulan link teman2 kita, ataupun link menuju website/situs yang kita sering kunjungi.
berikut cara pembuatannya :

1. Login ke Blogger
2. Kemudian klik Tata Letak dan Elemen Halaman
3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
4. Lalu pilih HTML/JavaScript
5. Langkah selanjutnya masukkan kode DropDown Menu seperti contoh dibawah ini :

<form><select name="menu" onchange= "window.open(this.options[this.selectedIndex].value,'_blank')" size=1 name=menu>

<option>- My Friend's Links -</option>

<option value="http://adesyams.blogspot.com/">Ade'S Tricks</option>

<option value="http://id-fans.blogspot.com/">Irvan'S Diary</option>

<option value="http://ikkefransiska.blogspot.com/">Ikke's Blog</option>

<option value="http://gieciencute.blogspot.com/">Blog Icha</option>


</select></form>

Hasilnya akan seperti ini :

- My Friend's Links -

Ade'S Tricks

Irvan'S Diary

Ikke's Blog

Blog Icha

Apabila tidak berhasil cobalah kode lain seperti berikut di bawah ini :

Ini adalah kode menu dropdown yang beda dengan yang diatas kode dibawah ini dibagi menjadi 2 :

• kode menu dropdown yang apabila di klik tidak membuka halaman/tab baru ( mengganti halaman tersebut dengan link yang baru di klik )

Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:

<center><select onchange= "document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected="selected">- My Favorite Links -</option>
<option value="http://www.blogger.com/"> Blogger.com </option>
<option value="http://www.google.com/"> Google.com </option>
<option value="http://www.gmail.com/"> GMail (google mail) </option>
<option value="http://www.yahoo.com/"> Yahoo! </option>
<option value="http://www.mail.yahoo.com/"> Yahoo Mail </option>
<option value="http://www.facebook.com/"> FaceBook.com </option>
<option value="http://www.gudanglagu.com/"> GudangLagu.com </option>
<option value="http://www.4shared.com/network/search.jsp"> 4Shared.com </option></select></center>

Contoh Hasilnya :


- My Favorite Links -
Blogger.com
Google.com
GMail (google mail)
Yahoo!
Yahoo Mail
FaceBook.com
GudangLagu.com
4Shared.com

• kode menu dropdown yang apabila di klik akan membuka halaman/tab baru

Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:

<center><select onchange= "javascript:window.open(this.options[this.selectedIndex].value;">
<option value="0" selected="selected">- My Favorite Links -</option>
<option value="http://www.blogger.com/"> Blogger.com </option>
<option value="http://www.google.com/"> Google.com </option>
<option value="http://www.gmail.com/"> GMail (google mail) </option>
<option value="http://www.yahoo.com/"> Yahoo! </option>
<option value="http://www.mail.yahoo.com/"> Yahoo Mail </option>
<option value="http://www.facebook.com/"> FaceBook.com </option>
<option value="http://www.gudanglagu.com/"> GudangLagu.com </option>
<option value="http://www.4shared.com/network/search.jsp"> 4Shared.com </option></select></center>

Contoh Hasilnya :


- My Favorite Links -
Blogger.com
Google.com
GMail (google mail)
Yahoo!
Yahoo Mail
FaceBook.com
GudangLagu.com
4Shared.com
Gantilah tulisan yang berwarna biru dengan link yang diinginkan.
Adapun tulisan yang berwarna merah adalah tulisan/nama dari link yang berwarna biru tersebut.
Ket : Kode <center> dan berakhiran </center> adalah agar dimaksudkan berada di posisi tengah pada menu atau sidebar tempat kita menaruh dropdown menu ini.
dan juga bisa dipakai untuk semua kode html maupun java script.

Semoga Berhasil

Demikianlah artikel mengenai Cara Membuat DropDown Menu dari blog Newbie Ngeblog Aja thanks
Semoga Bermanfaat..