Cara Membuat Sub DropDown Menu Horizontal
Dalam kesempatan ini saya akan sedikit menambahkah tentang "Membuat Sub Dropdown Pada Horizontal Menu". Jangan kedipkan mata kamu dan mari kita mulai trik bloggernya.
Oia, sebelumnya buat dulu horizontal menu, silakan buka Membuat Menu Horizontal dan Membuat Sub Drop Down Menu
Login dulu ke account blogger kamu.
Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips: Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada.
#nav li ul a {
width: 100px;
}
#nav li ul ul {
position: absolute;
margin: -30% 0 0 95%;
}
#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 li li.sfhover ul {
left:auto;
}
#nav li:hover, #nav li.sfhover {
position:static;
}
Cari kode HTML <div id='navleft'>.
Tips: Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a>
<ul>
<li><a href='URL sub 1'>teks kamu</a></li>
<li><a href='URL sub 2'>teks kamu</a></li>
<li><a href='URL sub 3'>teks kamu</a>
<ul>
<li><a href='URL sub 3.1'>teks kamu</a></li>
<li><a href='URL sub 3.2'>teks kamu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
</ul>
</div>
</div>
Jangan lupa disimpan. ncang
Selamat membuat sub dropdown pada horizontal menu...
Leave Comments