Wira Dana: Cara Membuat Navigasi Dropdown Menu

Navigasi Dropdown Menu

*

Kita mulai tutorialnya.

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:
]]></b:skin>
4. Ketikkan kode berikut diatasnya.
/* Navigasi Dropdown Menu */
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:100%;
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 */
padding:9px 10px 9px 10px;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#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:0 1px 1px 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, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
left:auto;
}
.ngumpet{
display:none;
}
.muncul{
display:block;
}
5. Cari kode berikut.
</head>
6. Ketikkan kode berikut diatasnya.
<script>
var auahgelap = '';
function petakumpet(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan == 'ngumpet') {
if (auahgelap != '') {
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'ngumpet';
}
menu.className = 'muncul';
auahgelap = id;
} else {
menu.className = 'ngumpet';
}
}
function umpetpetak(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan != 'ngumpet') {
if (auahgelap == '') {
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'muncul';
}
menu.className = 'ngumpet';
auahgelap = id;
} else {
menu.className = 'muncul';
}
}
</script>
7. Cari kode yang mirip kode berikut.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
</b:section>
</div>
8. Dibawahnya, ketikkan kode berikut.
<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href="#">Home</a></li>
<li onmouseout='petakumpet("submenu1")' onmouseover='umpetpetak("submenu1")'><a href='#'>Menu 1</a>
<div class='ngumpet' id='submenu1'>
<ul>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Begadang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Baik-baik Sayang</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu2")' onmouseover='umpetpetak("submenu2")'><a href='#'>Menu 2</a>
<div class='ngumpet' id='submenu2'>
<ul>
<li><a href='#'>Wali</a></li>
<li><a href='#'>Nidji</a></li>
<li><a href='#'>Letto</a></li>
<li><a href='#'>ST 12</a></li>
<li><a href='#'>Hijau Daun</a></li>
<li><a href='#'>Warteg Boyz</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu3")' onmouseover='umpetpetak("submenu3")'><a href='#'>Menu 3</a>
<div class='ngumpet' id='submenu3'>
<ul>
<li><a href='#'>Kang Rohman</a></li>
<li><a href='#'>O-OM</a></li>
<li><a href='#'>Mas Doyok</a></li>
<li><a href='#'>Anangku</a></li>
<li><a href='#'>Cebong Ipiet</a></li>
<li><a href='#'>Beben</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu4")' onmouseover='umpetpetak("submenu4")'><a href='#'>Menu 4</a>
<div class='ngumpet' id='submenu4'>
<ul>
<li><a href='#'>Amerika</a></li>
<li><a href='#'>Indonesia</a></li>
<li><a href='#'>Australia</a></li>
<li><a href='#'>Inggris</a></li>
<li><a href='#'>Italia</a></li>
<li><a href='#'>Prancis</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu5")' onmouseover='umpetpetak("submenu5")'><a href='#'>Menu 5</a>
<div class='ngumpet' id='submenu5'>
<ul>
<li><a href='#'>Wayne Rooney</a></li>
<li><a href='#'>Didier Drogba</a></li>
<li><a href='#'>Christiano Ronaldo</a></li>
<li><a href='#'>Del Piero</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu6")' onmouseover='umpetpetak("submenu6")'><a href='#'>Menu 6</a>
<div class='ngumpet' id='submenu6'>
<ul>
<li><a href='#'>Afgan</a></li>
<li><a href='#'>Vidi Aldiano</a></li>
<li><a href='#'>Derby Romero</a></li>
<li><a href='#'>Agnes Monica</a></li>
<li><a href='#'>Sherina</a></li>
</ul>
</div>
</li>
</ul>
</div>
Ket:

Kode Submenu1, Submenu 2, dst harus disesuaikan dengan menu yang akan tampil.
Tanda # pada kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
Anda bisa menambah atau mengurangi menu diatas.

9. Lalu klik Simpan Template.

10. Lihat hasilnya.

Semoga Sukses..:)

Jumat, 04 Maret 2011

Cara Membuat Navigasi Dropdown Menu