Cara Membuat Navigasi Dropdown Menu

Pada postingan yang lalu, saya sudah pernah membahas tentang cara membuat navigasi menu. Nah, pada postingan kali ini, kita akan membahas tentang cara membuat navigasi dropdown menu. Yaitu navigasi menu yang jika mouse berada di atas navigasi menu tersebut akan keluar submenu-submenu lainnya. Contohnya seperti gambar diatas.

Bagaimana? Menarik bukan? Begini cara membuatnya.

Pertama-tama login dulu ke Blogger. Lalu klik Tata Letak > Edit HTML. Oh,ya. Jangan lupa backup dulu templatenya.

Sudah siap? Lakukan langkah-langkah dibawah ini.

1. Cari kode berikut.

]]></b:skin>

2. Lalu letakkan kode berikut ini.

/*--Navigasi Dropdown Menu--*/
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:580px;
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 (hover) */
color:black; /* 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:200px; /* 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;
}

Oh,ya. Apabila anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.

3. Cari kode yang mirip dengan kode dibawah.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='C A Minor D Minor ke G ke C Lagi (Header)' type='Header'/>
</b:section>
</div>

4. Dibawahnya, ketikkan kode berikut.

<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href='http://muhammadrizkifadillah.blogspot.com'>Home</a></li>
<li><a href='http://muhammadrizkifadillah.blogspot.com/search?max-results=1000'>Daftar Isi</a></li>
<li><a href='#'>Other Blogs</a>
<ul>
<li><a href='http://allaboutmusicishere.blogspot.com'>Info Musik</a></li>
<li><a href='http://beritaduniamaya.blogspot.com'>Berita Dunia Maya</a></li>
<li><a href='http://siapayangpantas.blogspot.com'>Belajar SEO</a></li>
</ul>
</li>
</ul>
</div>

Gantilah tulisan http://muhammadrizkifadillah.blogspot.com dengan link yang anda inginkan dan gantilah tulisan Home dengan tulisan yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.

5. Klik Simpan Template.

6. Lihat hasilnya.

Apabila anda bingung, jangan ragu dan takut untuk bertanya. Caranya komen saja dibawah.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya