Cara Membuat Dropdown Menu 3 Level Kebawah

November 21, 2015 Jazuli rahman 63 Views 0 Comments

Cara membuat Menu Dropdown keren dengan mudah. Dalam dunia blogger untuk masalah MenuDropdown sangatlah berperan penting bagi anda yang memiliki konten yang cukup banyak dan ini sangat membantu bagi para visitors blog untuk melihat artikel-artikel anda secara cepat. Menu dropdown juga memperindah tampilan blog anda sehingga membuat visitors blog anda menjadi betah untuk berlama-lama di blog anda.

Berikut langkah-langkah dalam membuat menu dropdown di blog :

Pertama : Kita menuju Template / Rancangan dan kemudian Edit HTML jangan lupa centang expand template widget dan cari kode ini ]]></b:skin> dan paste kode dibawah ini tepat diatas kode tersebut,

/*—– MBT Drop Down Menu —-*/

#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;

position: relative;
border-top:0px solid #960100;
height:35px;
}

#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;

}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;

}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;

}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

Copy pastenya sampai tanda } di atas.
Keterangan :
#060505 untuk merubah warna background dari menu utama/Main menu
kode yang berlatar kuning untuk merubah warna font, ukuran dan namanya
#BF0100 untuk merubah background dari tab pada mouse hover
#BF0100 untuk merubah warna background dari menu drop down
#060505 untuk merubah warna background dari menu drop down pada mouse hover

Kedua : Kalau sudah di pratinjau dulu untuk melihat hasilnya dan jika berhasil jangan lupa simpan templatenya.

Ketiga : Langkah Selanjutnya kita menuju ke Tata Letak dan pilih add gedget dan pilihHTML/JavaScript dan paste kode berikut :

<div id=’mbtnavbar’>
<ul id=’mbtnav’>
<li>
<a href=’#’>Home</a>
</li>
<li>
<a href=’#’>About</a>
</li>
<li>
<a href=’#’>Contact</a>
</li>
<li>
<a href=’#’>Sitemap</a>
<ul>
<li><a href=’#’>Sub Page #1</a></li>
<li><a href=’#’>Sub Page #2</a></li>
<li><a href=’#’>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>

Ket :

Ganti # dengan Links halaman anda dan teks bercetak tebal (bold) dengan nama halamannya. Kode dengan latar kuning berfungsi untuk mengatur menu drop down. Anda bisa meng-copy dan paste kannya di bawah tab manapun yang anda inginkan tepat sebelum </li>

Untuk menambahkan tab lainnya paste kode berikut ini di atas kode </ul>

<li>
<a href=’#’>Tab Name</a>
</li>

Demikian kurang lebihnya cara membuat menu dropdown di blog. Terima kasih atas kunjungan anda dan jangan lupa komentarnya dan like juga yaa