Menambah Dropdown Menu dalam Horizontal Navigasi

Diposting trik blogger terdahulu OB 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 OB 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...

52 komentar untuk “Menambah Dropdown Menu dalam Horizontal Navigasi”

  1. kira kira kecepatan dropdown-nya bisa diatur nga ya...bang,,???,
    8-}

    BalasHapus
  2. terima kasih atas infonya!

    jangan lupa mampir ke sini yaa:
    www.noermanshoot.blogspot.com

    BalasHapus
  3. @didir: (daripada gak dijawab sama yang punya blog :p). gak bisa om. soalnya ini gak pake java. mungkin kalo mau cari yang pake script java atau yg lainnya. :)

    BalasHapus
  4. to didir: sama jawabannya ama firdaus. Udah defaultnya kaya gitu, dir. Tapi kelihatannya udah cepat tuh.

    to firdaus: thanks banget...:D

    BalasHapus
  5. mas klo bikin sub-sub menu dr kode diatas bisa gak? biar misalnya Label-Komputer-Hardware tapi sub menu yang kedua kesamping mas bisa gak yah??

    BalasHapus
  6. bang saya baru belajar bikin bloger, minta tolong boleh nggak? sudah ampir seminggu nich mau bikin menu drop down tapi gak bisa-bisa. bikinin dong boleh?

    BalasHapus
  7. to Ad4m San: Bisa tapi harus nambah kode CSS-nya dulu, tapi sebelum bikin posting lagi, lebih baik lihat menu horizontal pakai javascript. Siapa tahu pengen pindah he..he..? Klo Adam pindah, sedangkan OB posting kode CSS tambahannya jadi mubazir dong...

    to Abu Raylan: Selama OB bisa bantu, insyaAllah akan di bantu. thanks

    BalasHapus
  8. kayaknya prefer pake css deh mas soalnya lebih enteng buat di loadnya daripada pake script huhuhuh tolong yah mas :((

    BalasHapus
  9. mo nanya nich bang.....maklum (newbie)....setelah triknya ku coba. kenapa ya menu dropdown-nya sering hilang dan muncul jika mouse melintas di atasnya. Nggak kayak punya bang OB. Tolong dibantu ya bang.....Mksh!!!

    BalasHapus
  10. to onding: udah ngga masalah di blog onding, OB udah jalan-jalan ke blognya

    BalasHapus
  11. mice posting bang makasih pelajaran buatn nwebie nih

    BalasHapus
  12. :)mksh bang....udah neyempatin jalan-jalan to my blog. Saya tunggu trik-trik berikutnya.;))

    BalasHapus
  13. yeahahahahahah.............!! tips ini yang saya cari dan kebetulan sekali ketemu di sini . thanks mas!

    BalasHapus
  14. mau tak coba, terima kasih infonya!

    BalasHapus
  15. mampir guru.. mo nanya neh?

    emotion di comment box ku kok g jadi napa ya?

    kasih satan donk...

    BalasHapus
  16. OB juga pernah mengalami, hal ini mungkin disebabkan javascript emoticon disimpan dalam web hosting tertentu sehingga waktu dipanggil tidak bereaksi. Coba ganti pemanggilan javascript yang dihostkan tadi dengan full javascript emoticonnya. Thanks

    BalasHapus
  17. bang saya ndak isa nemu kode yang dimaksud..
    apa blog saya error......
    TOLONG KASIH JALAN KELUAR YA.... MAKASIH SEBELUMNYA.

    BalasHapus
  18. to Kibagus: bagaimana menemukan kode menu horizontalnya ki, jika kode menu horizontalnya belum ada. Sebab posting ini merupakan pelengkap dari posting sebelumnya. Silakan cari posting dalam search di blog ini tentang "menu horizontal"

    BalasHapus
  19. penempatan kode css #nav li li itu dimana ya???

    BalasHapus
  20. kode css #nav ditaruh dimana??

    BalasHapus
  21. oke sob di coba langsung ah...

    BalasHapus
  22. Wah...tipsnya bagus, tapi setelah dicoba malah gak karuan, trus saya kembalikan lagi....ntar tak coba kembali....thank's infonya

    BalasHapus
  23. trim mas sudah bisa cuma bagaimana
    1. memasukkan beberapa posting baru ke sub menunya
    2. memasukkan beberapa posting lama ke sub menunya

    BalasHapus
  24. UDAH DI COBA SOB TAPI TETEP GAK BISA PADAHAL AKUDAH MELUAKUKAN SEMUA PETUNJUKMU DENGEN BENAR :D

    OH YA AKU PAKAI TEMPLATE (Magazine Template 2)

    BalasHapus
  25. Terima kasih atas triknya.

    BalasHapus
  26. wahh..pusing juga ternyata...

    BalasHapus
  27. Aku menemukan yang kucari disini. .. Terimakasih banyak dan akan ku coba. ...

    BalasHapus
  28. gant,aku baru seminggu buat blog jadi masih gaptek bgt hihii(nambahin emo aja ga bisa)
    maksudnya langkah tambahan di atas itu apa?nav li li yang sudah ada di ganti dgn yang itu atau di tambahkan?

    BalasHapus
  29. terima kasih atas informasinya, ijin ikut belajar. salam

    BalasHapus
  30. manteb nieh aku cari dari dulue eh nemu disini

    BalasHapus
  31. tips keren mas... tapi saya ada masalah, tolong dong... saya udah berhasil buat seperti yang diatas, tapi masalahnya kok dpordown menunya gak rata mas... bisa bantu ga? sepertinya masalah di CSS saya. blogs saya http://helmyinfo.blogspot.com
    bisa kirim ke emaail saya mas solusinya?
    helmy_gatsoe@yahoo.com

    BalasHapus
  32. thanks infonya..
    kalau sub menunya di tambah menu lagi tapi ke samping bisa ga ya??

    http://lokerfavorit-kavie.blogspot.com

    BalasHapus
  33. Komentar ini telah dihapus oleh penulis.

    BalasHapus
  34. makasih bos, luar biasa deh..

    BalasHapus
  35. terima kasih tips nya ya..gan...
    kunjungan balik yan ke :
    www.murni-design-rumah.blogspot.com

    BalasHapus
  36. thanks broo atas info nya

    BalasHapus
  37. thnkyu boss.... sangat bermanfaat..

    BalasHapus
  38. drop down saya tertimbun kode dibawahnya, mas,..mohon pencerahan :)

    BalasHapus
  39. mas, semua cara uda saya praktekan. uda bisa buat menu navigasinya. tapi kok blm bisa dropdown ya?

    add YM saya mas, sekalian cek blog saya arif-dian.blogspot.com

    BalasHapus
  40. dropdown udah bisa,,tpi kok ktika disorot gmpang sekali tuk hilang,,ada solusinya gak??
    coba lihat di http://northsulawesi-tourism.blogspot.com

    thx,

    BalasHapus
  41. Punya saya sama kayak Bry-XP bang, solusinya dong. pleassssse???

    BalasHapus
  42. @Bry_XP & @PKP-2 STPI:
    Keliatannya ada yang kurang kode CSS - nya di atas, gan.

    #nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    position:absolute;
    }
    #nav li {
    float: left;
    margin:0px;
    padding:0px;
    position:relatif;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ffffff;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 7px 30px 7px 10px;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    display:block;
    }

    Coba diperbaiki kode tersebut, gan dan huruf tebal merupakan kode CSS yang perlu ditambahkan.
    Terima kasih, gan. Ntar saya update postingnya.

    BalasHapus
  43. @PKP-2 STPI:
    Agan kan sudah memasukkan kodenya di CSS, coba cari #nav ul, #nav li, dan #nav li li a, #nav li li a:link, #nav li li a:visited.
    Kemudian tambahkan kode yang tercetak tebal, di tiap elemen kode di atas.

    BalasHapus