Menambah Menu Horizontal Multy Drop Down

Tips Blog :

Sudah lama ngak bahas soal tips tips blog. kali ini mencoba membahas satu menu. lumayan suka juga aku sama menu yg satu ini. menu horizontal multy drop down, yach begitu lah blogger sering menyebutnya. sedikit share nih buat teman-teman pendatang baru yang pingin nyoba menu ini.

pertama sudah pasti pergilah ke blogger melalui account kamu, kalau sudah login klik layout/element halaman --->> EDIT HTML . lalu cari kode ini :

]]></b:skin>

dan tambahkan kode berikut diatasnya

#NavbarMenu {
background: #228B22 url(http://i28.tinypic.com/2lk5ukm.jpg) repeat-x top left ;
width: 100%;
height: 35px;
color: #FFF;
margin: 0;
padding: 0;
font: bold 12px Arial, Tahoma, Verdana;
}
#NavbarMenuleft {
width: 865px; /* lebar menu sebelah kiri */

float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 340px; /* lebar menu sebelah kanan */
font-size: 11px;
float: right;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid #FFF;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
font: normal 16px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background: #808000 ;
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#9ACD32 url();
width: 150px;
color: #FFF;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #008000;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}

catatan :

tulisan berwarna biru adalah penjelasan warna dari setiap menu , warna bisa kamu ganti biar sesuai dengan blog kamu, kode warna bisa dilihat di sini

kalau tulisan hitam adalah penjelasan dari lebar menu kanan dan kiri, lebar dari ke dua menu tidak boleh lebih dari lebar outter-wrapper. usahakan sama atau kurang dikit, kalau sudah save template dahulu.


diatas adalah kode CSSnya, sekarang peletakan kode htmlnya, carilah dahulu kode

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>

kalau sudah ketemu letakan kode barikut diatasnya :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://namablogmu.blogspot.com/'>Home</a></li>
<li><a href='#'>tambah menu</a>
<ul>
<li><a href='#'>tambah menu</a>
<ul>
<li><a href='#'>tambah menu</a></li>
</ul>
</li>
<li><a href='#'>tambah menu</a></li>
</ul>
</li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>

<li><a href='#>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
</ul>
</div>
</div>

catatan, untuk menambah drop baru lihat kode2 berwarna merah dan itu adalah panduannya, ikuti jika ingin menambah drop baru

tulisan # adalah lokasi link untuk menu baru.

menu ini juga bisa di letakan diatas kode :

<div id='header-wrapper'>

sama-sama baiknya.

catatan: jika template ngak bisa disave jangan sungkan bertanya, karna menu ini memang sedikit susah ditangani bila sudah pake bercabang-cabang. jadi mesti ada kesabaran mengolahnya.

Artikel Terkait