Cara Membuat Dropdown Menu

Kemarin saya ketemu teman saya dikampus dan dia bertanya kepada saya bagaimana tips membuat dropdown menu dan sekarang saya akan menjelaskannya. Mungkin dia masih pemula baru pertama bikin blog dan jangan salah saya juga masih pemula alias masih newbe hehehe. Mau mempunyai menu dropdown seperti ini, ini fungsinya untuk memudahkan pengunjung supaya tau isi dari menu Anda. Contohnya pada gambar tanpa diklik menu Semester akan keluar atau menjulur ke bawah seperti pada gambar diatas dan banyak lagi fungsinya. Sekarang saya akan menjelaskan sedikit teknik untuk membuat menu dropdown yang mungkin agak menarik. Ayo ikuti tutorial berikut ini:

1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HML.

2. Centang Expand Template Widget.

3. Anda juga perlu untuk membackup template asli anda terlebih dahulu dengan Download Template Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.

4. Cari kode : ]]></b:skin>

Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.

5. Letakkan kode dibawah ini diatas kode tersebut.

/*--Navigasi Dropdown Menu--*/
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:950px;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya undefinedhover) */
color:blue; /* Warna teks saat kursor mouse berada di atasnya */
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:180px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}

Anda bisa merubah atau mengedit kode CSS yang ditunjukkan warna merah sesuai dengan kondisi template anda.

6. Kemudian cari kode: <div id='header-wrapper'>

7. Masukkan kode dibawah ini sebelum kode berikut:

<ul id='navdropdownmenu'>
<li><a href='http://mas-debby.blogspot.com/2010/12/teknik-komputer_14.html'>Home</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/mata-kuliah_08.html'>Mata Kuliah</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester.html'>Semester</a>
<ul>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-i-1st.html'>Semester I / 1st</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-ii-2nd.html'>Semester II / 2nd</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-iii-3rd.html'>Semester III / 3rd</a></li>
</ul>
</li>
<li><a href='http://mas-debby.blogspot.com/2010/12/software.html'>Software</a></li>
<li><a href='http://mas-debby.blogspot.com/2011/01/kode-warna-html.html'>Kode Warna Html</a></li>
</ul>

8. Lalu ganti warna merah dengan link anda dan warna hijau dengan judul link anda OK. Anda bisa mengkondisikan dengan posisi dimana Anda akan taruh menu dropdownnya. Biasanya menu normal Anda adalah Anda cari kode Home dan urlnya di Edit HTMLnya kemudian Anda ganti dengan kode diatas.

9. Jangan Lupa Simpan Template. Semoga berhasil kalau masih bingung Anda boleh kirim komentar dibawah ini Mas Debby akan bantu.

Sumber: http://mas-debby.blogspot.com/