Saya pernah membahas cara membuat navigasi menu yang pernah saya buat DISINI. Tetapi, navigasi menu tersebut hanya mampu menampung sedikit link. Nah, jika kita akan menampung banyak link, gimana? Kita bisa membuat navigasi dropdown menu. Ketika sebuah menu disorot, menu lainnya akan muncul. Seperti gambar ini.
Nah, untuk contohnya, anda bisa melihatnya di
http://forumparablogger.blogspot.com (sorry, bukan promosi). Oh, ya. Menu ini menggunakan javascript. Jadi, ini bisa membuat blog anda sedikit lebih lambat. Nah, jika sudah kebelet ingin memiliki navigasi dropdown ini, ikuti 10 langkah berikut dan yang kebelet pipis silahkan ke belakang dulu.
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.
Selamat mencoba! Apabila bingung, tanyakan dalam komentar.
Read More......
