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 OB mau ngga mau menerbitkan posting ini (ha...ha...ha...). Sorry, yang merasa disentil berarti mendapat perhatian khusus dari OB. 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 OB 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'>.
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.
<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...

31 komentar untuk “Menu Turunan dalam Horizontal Navigasi Kode CSS”

  1. wah tararengngkyu mas :))

    BalasHapus
  2. Gud tips mas... langsung di coba neh :D

    BalasHapus
  3. Siang mas OB.. Boleh kupakai template mu mas? aq nemu di postingannya O-OM tgl 28 kemaren. Aq jatuh cinta ma templatenya mas OB sejak pertama main kesini. =)) sangat nyaman, bersih, rapih, sehat dan seo friendly. Aq udah nyoba2 beberapa template, tapi baru ini yang kena di hati :D Maap mas, ga sesuai topik.

    BalasHapus
  4. mas OB,blh ksih sran ga?
    seharusnya dalam postingan untuk trik2 blogger di beri gambaran atau contohnya untuk trik2 yg sudah jadi,kan biar blogger pemula pun akan tahu akn jdi seperti apa nnti trik2 blogger yg akan dipasangnya..

    BalasHapus
  5. makasih browww atas ilmunya..........

    BalasHapus
  6. informasi yg luar biasa mantap nii kang :)
    tfs!!!

    BalasHapus
  7. Wah langsung praktek di TKP ah. .

    Matur thank u mas OB. .

    Tipsx woke bgt deh. .

    BalasHapus
  8. to all: Thanks berat...:D

    to f3hry: Masukkan yang menarik, akan OB masukkan dalam rekomendasi penulisan posting trik blogger selanjutnya

    BalasHapus
  9. boss tong dong masih bingung nih cara buat menu horizotal yg pakai turunan, aku dah coba tp kok nggak bisa maklum pemula dan nggak ngerti bahasa program, maturnuwun

    BalasHapus
  10. to Much asyiq: Keliatannya menu horizontalnya ada yang tidak muncul, coba perkecil font-size:11px; (10px,9px,...) dalam kode CSS #bg_nav, #bg_nav a, #bg_nav a:visited.
    Kemudian menu dropdownnya ngga perlu nambah kode, cukup dengan memasukkan menu yang akan didropdown (kodenya li li), ex :
    <div id='nav'>
    <ul>
    <li><a href='http://ukuwahislamiah.blogspot.com/'>Home</a></li>
    <li><a href='http://ukuwahislamiah.blogspot.com/search/label/Belajar%20Sholat'>Belajar Sholat</a>
    <ul>
    <li><a href='http://ukuwahislamiah.blogspot.com/2009/06/jangan-abaikan-salat-tahajud.html'>Sholat Tahajud</a></li>
    <li><a href='http://ukuwahislamiah.blogspot.com/2009/05/cara-sholat-tasbih.html'>Sholat Tasbih</a></li>
    </ul>

    </li>
    <li><a href='http://ukuwahislamiah.blogspot.com/search/label/Kata-kata%20Hikmah'>Isalmiah </a></li>
    <li><a href='http://ukuwahislamiah.blogspot.com/search/label/Kursus%20Blogger'>Kursus Blogger</a></li>
    <li><a href='http://www.formulabisnis.com/?id=aiyk'>Bisnis Online</a></li>
    <li><a href='http://financialdanbursa.blogspot.com/'>Pasar Modal</a></li>
    </ul>
    </div>

    Lihat kode yang diberi link (kode tambahan untuk dropdown menu horizontal).

    BalasHapus
  11. Tq OB buat artikel yang 1 ini.. pas banget baru mau cari caranya buat sub menu ehh dah ada di sini..

    Boleh tanya dikit ga? beda css dengan javasript di mana nya sih?? binggung jg dengan kode computer..

    BalasHapus
  12. Bro OB, setelah saya masukin kode nya ternyata di IE berhasil sedangkan di Mozilla gagal.. tampilannya jadi kesamping bukan ke jadi turunan.. Salahny dimana ya?

    BalasHapus
  13. to W4nz: CSS ringan diloading tp tampilannya kaku, sedangkan javascript agak berat diloading tp tampilannya dinamis. Klo javascript dalam blog W4nz sedikit, tentunya tidak terlalu berpengaruh dengan waktu loading.
    Tentang Menu horizontal, mungkin peletakkan kode HTML-nya ada yg kurang tepat. ex:
    <ul>
    <li>teks 1</li>
    <li>teks 2
    <ul>
    <li>teks 2.1</li>
    <li>teks 2.2</li>
    </ul></li>
    </ul>
    Perhatikan setelah teks 1 terdapat kode </li>, namun setelah teks 2 tidak ada. Karena akan ditambah menu turunan, jd teks 2.1 dan teks 2.2 merupakan bagian sub menu dari teks 2 (diapit oleh kode <li> ... </li>.

    BalasHapus
  14. Nah,, sekarang dah bisa.. untung ada yang mengeri bhs programer.. an mau sharing lagi.. makasih banyak OB..

    BalasHapus
  15. Uppss,, menganggu lagi ni..
    kok di mozilla waktu saya mengarahkan kursor nya ke sub menu, sub menu ny jadi ilang langsung.. jadi ga bisa di tekan ni.. tp di IE bisa.. salah ny dimana ya? an kalo kolom sub menuny mau di sesuaikan dengan lebar kolom menuny mana yang harus di rubah yang mana?

    BalasHapus
  16. boleh jg nih
    mw coba dl, thanks ya dah share
    keep blogging!
    maju truss

    BalasHapus
  17. mas aku sudah coba menu turunannya dan berhasil tapi sub menu nya koq gak bisa digeser kekanan yaaa itu kode scriptnya yang harus diubah

    coba dilihat: http://percobaans2.blogspot.com/

    makasih

    BalasHapus
  18. tutorial yg bagus.thank's

    BalasHapus
  19. saya sudah praktekkan..tapi ternyata di menu turunnanya jadi gak ada.ilang menu drop downnya..solusinya bagaimana?
    terima kasih..

    BalasHapus