Membuat Dropdown Pada Horizontal Menu

dropdown horizontal menu
Diposting trik blogger terdahulu saya telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS yang disadur dari blog Kang Rohman. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut. Betulkan... Seandainya saya jeli mengamati kode menu horizontal tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :

  • Login ke account blogger kamu.
  • Pilih 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.

  • Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.

    <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'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>


Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

  • Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.

    <ul>
    <li><a href='URL sub 1'>Sub menu 1</a></li>
    <li><a href='URL sub 2'>Sub menu 2</a></li>
    <li><a href='URL sub 3'>Sub menu 3</a></li>
    </ul>


Contoh :

    <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'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a>
    <ul>
    <li><a href='URL sub 1'>Sub menu 1</a></li>
    <li><a href='URL sub 2'>Sub menu 2</a></li>
    <li><a href='URL sub 3'>Sub menu 3</a></li>
    </ul>
    </li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>


Catatan :
   1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
   2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.
  • Jangan lupa disimpan.

Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px; <!-- lebar dropdown menu -->
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; <!-- warna latar dropdown menu -->
width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->
border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->
border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->
<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode border: 1px solid #ffffff; -->
}
#nav li li a:hover, #nav li li a:active {
background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->
padding: 7px 30px 7px 10px;
}


Selamat berdropdown dengan menu horizontal...

25 komentar:

  1. oh gitu ya caranya.. Ini loadingnya lama gak? Thx ya udah share..

    BalasHapus
  2. GADO: Ringan koq, dicoba dulu aja. Sama-sama....

    BalasHapus
  3. thx ya om, ketoe aku deh yg pernah tanya

    BalasHapus
  4. ko ga bisa di klik sub menunya ya? langsung ilang pas kursor dikebawahin..??

    BalasHapus
  5. aku baru nich di bloger,jadi masih nubie,tutor2nya sangat membantu. masalahnya = yang dialami riza mukti, sub menunya koq hilang pas korsor dikebawahin.tolong solusinya sob??? please

    BalasHapus
  6. Masalah itu juga saya alami pada saat menggunakan tutorialnya kang rohman yang membuat dropdown dengan java script, masalahnya karena java script tidak bekerja. Tapi tutor diatas tidak memakai Java Script koq...

    BalasHapus
  7. ngk bisa dipake sub menunya.. klo dklik langsung ilang. ada yg perlu diedit ngak mas?... makasih

    BalasHapus
  8. tu kode yg css naruhnya dimana trus maksudnya gmn? yg jelas dung. cos aku bru blajar blogging?

    BalasHapus
  9. ngk bisa dipake sub menunya.. klo dklik langsung ilang. ada yg perlu diedit ngak mas?... makasih

    BalasHapus
  10. KK tolong dong aku kasih link tempat aku ya ... http://skyzonestudio.blogspot.com.
    dropdown aku muncul tapi gak bisa diclik .. mau di clik ilang.

    BalasHapus
  11. ya tuh gimana solusinya... kok sub menunya ilang pas mau di klik ?
    gimana solusinya kk ?
    TQ

    kunjungin blog aku yah
    http://www.cipudan.co.cc/

    BalasHapus
  12. aku dah coba kok sub menunya gak mau tampil pas di tunjuk kursor... kayaknya tampil di belakang tuh... bagaimana cara ngatasinnya?

    BalasHapus
  13. kok menu nya aku gak bisa di klik?? gmn ya ?? thanks

    BalasHapus
  14. o....gitu ya sahabat, thank's banyak dah moga sukses selalu

    BalasHapus
  15. terima kasih banyak atas infonya massssssss...
    bagi temen-temen yang gila bola jangan lupa juga berkunjung
    keblog saya!!! di www.barter-bola.blogspot.com

    BalasHapus
  16. menu saya udah jdi,,tpi kok gmpang banget hilang yah?!
    mnta bntuannya di http://northsulawesi-tourism.blogspot.com,,
    thx

    BalasHapus
  17. itu mesti kata home atau terserah kita yang mau dijadiin menu dropdown itu yang mana?
    thanks

    BalasHapus
  18. kok sub menunya ilang pas mau di klik ?
    gimana solusinya mas?

    BalasHapus
  19. pas kursornya di ke bawahin, ilang cause kena` entri di bwahnya, truz ilang, gimana neh? bisa kasi solusinya g? thanks

    BalasHapus
  20. Thanks ya gan tas infonya,...

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.