Menu Turunan dalam Horizontal Navigasi Kode CSS

Menu Turunan dalam Horizontal Navigasi Kode CSS

Lagi-lagi menu horizontal, sampai-sampai bosan nih!!! Yah, mungkin karena sudah terlanjur cinta sama yang namanya menu horizontal dengan menggunakan kode CSS dibandingkan menu horizontal pakai javascript, jadi banditz mau ngga mau menerbitkan posting ini (ha...ha...ha...).Seperti webblog www.kraksaan-online.com ,blog ini sudah saya modif sehingga untuk menu saya buat shoutlinks untuk memudahkan pengunjung untuk mencari berita . Memang kalau dipikir-pikir yang namanya trik blogger tidak akan pernah habis-habisnya, kecuali tidak ada lagi orang yang nge-blog di blogger. Dalam kesempatan ini banditz akan sedikit menambahkah tentang "bagaimana membuat menu turunan dalam horizontal navigasi CSS, terutama menu turunan yang kedua?". Jangan kedipkan mata kamu dan mari kita mulai trik bloggernya.

Bagi yang belum kebagian baca posting menu horizontal menggunakan kode CSS, silakan baca di menu horizontal ini.




* 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'>.


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>


Catatan :

1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode
berwarna hijau.
2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai
dengan kode yang berkedap-kedip.
3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.


* Jangan lupa disimpan.


Selamat menambah sub sub menu dalam sub menu horizontal navigasi kode CSS...

3 comments

avatar
×

"Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada."
Sayangnya Kalimat tersebut di atas tidak ditunjang dg gambar pemetaan yg menunjukan penjelasan ketika melakukan Edit HTML dalam Blog. Kalau bisa usul, seharusnya: Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada, seperti terlihat pada gambar di bawah ini. (Betitu lho Kang Mas, misalnya..., kan enak buat pembaca-pemula). Trim's dari simpatisan tulisanmu.

avatar
×

heheheh iya maksih yaa