82 Multi Level Drop-Down Menu Dengan CSS dan JQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Multi level drop-down menuMulti level drop-down menu

View Demo

Pada postingan saya sebelumnya yang berjudul 30 tab menu navigasi horizontal, seorang pengunjung bertanya pada kolom komentar cara membut menu drop-down. Alhamdulillah setelah search digoogle, saya temukan tutorial membuat multi level drop-down menu dengan CSS dan JQuery untuk web dari Dinamic Drive. Setelah saya modifikasi tutorial ini bekerja dengan baik pula pada template blogger. Contohnya bisa lihat pada diatas atau free blogger template dalam pengembangan saya disini

Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery pada template blogger

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja

3. Tambahkan juga script berikut setelah script JQuery yadi

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
        <ul>
            <li><a href="#">Sub Item 3.1.1.1</a></li>
            <li><a href="#">Sub Item 3.1.1.2</a></li>
            <li><a href="#">Sub Item 3.1.1.3</a></li>
            <li><a href="#">Sub Item 3.1.1.4</a></li>
            <li><a href="#">Sub Item 3.1.1.5</a></li>
        </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template Hasilnya seperti screenshot berikut atau live demo lihat disini

 image_thumb13[1] 

Multi level drop-down menu 

Semoga bermanfaat! Thanks to Dinamic Drive


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

82 komentar :

  1. sip....makasih tutorialnya.

    BalasHapus
  2. menambahkan sub itemnya juga lewat edit HTML lagi ya? bukan di widget??

    BalasHapus
    Balasan
    1. Iya benar, klu mau yang tinggal ditambahin code css dan htmlx di bagian elemen halaman/tambah widget udah diposting khn di 30 tab menu horizontal

      Hapus
  3. hmmm malah bingung yg mau ditulis disana link apa saja...banyak banget sih....

    BalasHapus
  4. saya coba tapi ko ga muncul ya mohon pencerahannya

    BalasHapus
  5. Silahkan coba lagi, perhatikan dgn bk langkah-langkahnya, terapkan satu persatu kecuali pd template sobat sdh memiliki script JQuery maka langkah ke dua abaikan saja.

    BalasHapus
  6. thx udah berbagi
    salam kenal mbak

    BalasHapus
  7. bagus nih tipsnya..
    btw, ane jadi ga bisa save as lagi..
    blg donk bro triknya, kok pas di save as, file nya 0.. jadi ga bisa copy modif lagi nih.. hehehe
    btw lagi, thanks elmunya.. wassalam

    BalasHapus
  8. @ Sewa mobil murah: Terimakasih apresiasinya
    @ Seputar binis online: Maksudx apa? Mslhx? Maaf krg ngerti.

    BalasHapus
  9. Wuiih 30 tab? Banyak banget yah, tapi keren nih tutorialnya mba. Kapan2 kalo butuh pasti nyari dsini.

    Btw, mba tau cara masukin gambar ke postingan blog pake hp ga?belum berhasil nih aq mba...tq sebelomnya :)

    BalasHapus
  10. Ass.wr.wb
    Wah punya saya malah dihilangkan tuh.. habisnya gak bisa2.. jmenu atasnya gak bisa border n backgraound.. heran juga.. templatenya kali ya..
    Ohya ada Tag persahabtan buat ukhti .. mohon diambil nditerima ya..
    Wassalam

    BalasHapus
  11. mantappp tutorialnya... terima kasih yaaa...

    BalasHapus
  12. saya baru dapat tutorial seperti ini.
    mantap banget.
    makasih banyak..... Salam Taksim.

    BalasHapus
  13. makasih bang tutorialnya sangat berguna,,,,,, cocok buat pemula seperti saya,,, salam kenal bang..

    BalasHapus
  14. Wah kayaknya lebih gampang nih... makasih ya.. nanti dicoba deh

    BalasHapus
  15. Waduh kemarin malah ganti template karena gak bisa diuatk atik utk bikin drop down menunya .. ternyata ada tipsnya nih.. siiplah bookmark dulu ah..

    BalasHapus
  16. Sekedar mampir dan baca-baca artikel baru, soalnya blog "Indahnya Berbagi" memang banyak manfaatnya bagi saya.
    Thanks atas semua informasi dari Amatullah 83.

    BalasHapus
  17. thanks info nya..bagi kita yang newbie

    BalasHapus
  18. betul betul betul berguna bagi kita yang newbie

    BalasHapus
  19. Ukhti ini almat emailku

    amikhomisah@gmail.com

    atau

    ami.girl51@yahoo.com
    thanks

    BalasHapus
  20. @ Chomisah: iya ukh, insyaAllah ana kirim hari ini link download template dan sedikit panduan penggunaannya.

    BalasHapus
  21. saya dah lama nih gak berkunjung, n udah ada postingan yang luar biasa inspiratif bagi pengguna blog.
    saya lagi mikir nih mba' menu-menu apa saja buat ditambahin ke blog saya, soalnya postingannya masih sedikit :D

    BalasHapus
  22. Makasih info modifikasi tutorial nya, berguna mas ...

    BalasHapus
  23. wah dasat pa kueren bgt pasilitas nya

    kunjungi web ju ya ka

    BalasHapus
  24. Mksh info nya, terus kalau mau nambahin subitem gmana ya caranya...??

    BalasHapus
  25. @ Zeus: ikutin aja contoh yang ada pada folder 1 dan folder 2.

    Tanda # anda isi dgn link dan item atau sub item ganti dengan anchor teks dari link trsbt.

    Smg dpt membantu

    BalasHapus
  26. kalo buat frontpage bisa ga?.

    BalasHapus
  27. klo dksih search engine di bar itu gmn cranya??

    BalasHapus
  28. Bismillah.. kang Ana ucapin jazakumullah.... dari bong Akang Ana bisa dikit sedikit bertahap memperbaiki blog ana .... ana bnyak dapet dari kang.... slam keluara.... ana tunggu kunjungnnya... Alhamdulillah

    BalasHapus
  29. Maaf mba/mas,, saya udah utak atik tapi koq ga bisa y?
    dropdown nya ga berfungsi sempurna

    mhn pencerahan
    thx

    BalasHapus
  30. Salam kenal....mampir neh mbak, saya lagi mau buat navigasi horizontal dengan banyak submenu dan saya baca-baca blognya wah ketemu neh pencerahan. trims n sukses slalu

    BalasHapus
  31. satu jiwa...maaf nih mbak..newbie numpang pencerahannya...menu drop downnya uadah saya lakuiin seperti diatas...tapi waktu disimpan kok ada kt2.." The element type "head" must be terminated by the matching end-tag "". Gmn mbak...trims

    BalasHapus
  32. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  33. Makasih banyak mbak..

    sangat membantu saya..

    makasih sekali lagi..

    BalasHapus
  34. @ Hacker: InsyaAllah sy akn bahas pd kesempatan lain.

    @ el-taufiq & Adit: Tertulis jelas diprofil dan nampak dari nuansa blog ini. Wanita.

    Silahkan coba lagi dgn ketelitian.

    @ Iyank: Berarti ada tag yg tdk tertutup.
    @ Isnan: Sy lihat diblogx sudah berhasil masang multi level drop down menu ini? Tgl diisi dgn daftar link. Makasih jg apresiaasinya.

    BalasHapus
  35. @Admin

    oce.. lagi tahan pengisian :)

    BalasHapus
  36. yess... bisa, tapi nanya lagi deh.
    1. kalo mo letakan multi tab tadi bawah header blog gimana bos?
    2. kepingin modifikasi warna dan bentuk tabnya sama fontnya gimana bos?

    makasih yah... mantab neh. bwat belajar

    BalasHapus
  37. @ Wong majang:

    1. Jika ingin melettakkan multi tab navigasi horizontal diatas dibawah header mudah saja, letakkan saja kode HTML tab dibawah kode HTML header-wrapper, boleh jg diatas kode HTML main wrapper

    2. Kalau ingin modifikasi warna dan bentuk tabnya silahkan edit kode CSS tabx bos

    Makasih jg apresiasinya.

    BalasHapus
  38. thanks to info ya,,,makasih bang tutorialnya sangat berguna,,,,,, cocok buat pemula seperti saya,,, salam kenal ..

    BalasHapus
  39. thanks to info,,,n thanks dah berbagi ilmu,,,,,,

    BalasHapus
  40. assalam...terimakasih mbak atas ilmunya ..

    mau tanya ..kalo mau mengubah bentuk dan warna bentuk tabnya gimana yah? saya juga ingin warna - warni seperti punya mbak itu.. edit kode css tabx nya dimana ??

    BalasHapus
  41. assalam...mohon maaf mbak..tambahan pertanyaa lagi dari saya.
    apa yah yg salah kalo submenunya gak mau diklik, tiap saya mau klik langsung hilang...

    BalasHapus
  42. Biar tab menunya ada di bawah header gimana mas ? (yang di-post itu khan di atas header ), tengkiu

    BalasHapus
  43. Bagaimana cara merubah warna border ketika disorot mouse? cth : warna awalnya skrang hitam jika bordernya disorong mouse, mau diubah menjadi warna kuning ketika bordernya disorot mouse. thx....

    BalasHapus
  44. kk,klo bikin follow this blog itu gmna?say copy linknya kemudian ganti pake di saya jadi gabisa.mohon bantuan

    BalasHapus
  45. Kak, macam mana kalau tak ada main wrapper atau head wrpper. Aduhh, susah sangat nak cari..

    BalasHapus
  46. @ facebook hack: link follow blog anda yg digunakn
    @ nr cafe: mungkin bahasa code ditemplate anda yg berbeda, yg jelas main atau head pasti ada khn?

    BalasHapus
  47. Hi.. makasih tutornya...
    Tapi masih ada yg mau ditanyain nih. Waktu kursor lewat, kok ga kluar ya drop down menunya? Please minta pencerahannya.. Thx..

    BalasHapus
  48. mau tanya pada blog saya tidak menemukan kode <div id='header-wrapper', mohon bantuanya..
    sya udah lama gooling gag ktemu2 masalhnya apa.
    emang blog saya yang error html.nya atau ada cara lain?

    BalasHapus
  49. koq di blog saya ga ada code ini id='header-wrapper' knapa gan ya?

    BalasHapus
  50. Asallammualaikum mbk,
    aku si di sini newbie banget mbak, makanya blog aku uda 1 minggu ini jg belum jadi jadi, aku tadi ada baca artikel mbak, aku coba2 eh gak tau nya malah tidak seperti yang aku harapkan, mungkin aku ada salah dalam memasukan kode nya x ya mbak, mbak kalo ada waktu mampirin tempat aku ya, aku janji gak akan rubah blog itu sampe mbak liat, jadi nanti kalo mbak ks komentar kan aku jadi tau salah nya dimana. mau kan ya mbak bantu saya.....please....
    Terima kasih ya mbak aku rasa tutorial mbak semuanya sangat bermanfaat, cuma mungkin akunya aja yang gak da pengetahuan....

    BalasHapus
  51. ehmmm, a very interesting article. thank you for the information

    BalasHapus
  52. sama nih nggak ketemu header wrapper nya...

    BalasHapus
  53. kode yg nomr 5 kok gk ktmu sist/bro...
    mohon di periksa dong apa ada kesalahan???
    thx>>>>

    BalasHapus
  54. sist ane lagi nyari menu dropdown seperti ini tapi yang g usah ada tanda panahnya, adakah tutorialnya?

    BalasHapus
  55. asalamualikum maaf kalau untuk pengganti kode html di bawah apa yah coz pd blog saya code html seperti di bawah g ada???mohon bantuan nya
    div id='header-wrapper'

    BalasHapus
  56. makasih infonya, saya mau coba, moga aja gak jadi berantakan temanya, hahahhahahha

    BalasHapus
    Balasan
    1. Iya, silahkan dicoba, semoga berhasil dan bermanfaat! Terima ksih kunjungan dan apresiasinya!

      Hapus
  57. cara ini ngaruh gak ke semua browser, termasuk mobile.
    thank.

    BalasHapus
  58. Kalau untuk browser mobile kayaknya belum support dengan menu dropdown diatas. Thanks kunjungan dan apresiasinya!

    BalasHapus
  59. mksih tutorialnya
    kunjungi juga
    http://otobiazza.blogspot.com

    BalasHapus
  60. terima kasih tutornya
    nice info n blog too

    BalasHapus
  61. Asallammualaikum

    Terima kasih tutorialnya, saya masih pemula, mohon diperkenankan untuk saya copas ya?

    BalasHapus
    Balasan
    1. Wa'alaikumusslm. Silahkan jika reposts kembali postingan diblog ini adalah lbh bijak jk anda memberikan link back ke sumber artikel. Thanks 4 kunjungan dan apresiasi anda.

      Hapus
  62. Assalamualaikum. saya selalu suka dengan artikel anda yg mudah untuk diterapkan. Dan beberapa tutorial sudah saya pakai di web saya http://warnawarniwawasan.net/
    Kemudian, ada yang ingin saya tanyakan. Ada tidak tutorial untuk membuat drop down menu/label yang vertikal. Jadi drop down nya tidak kebawah, melainkan kesamping/kekanan. terima kasih. salam sukses selalu.

    BalasHapus
    Balasan
    1. Wa'alaikumusslm warahmatullah. InsyaAllah akn anaa posting pada kesempatan yang lain. Thanks ats apresiasi anda.

      Hapus
  63. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  64. Mantab dan keren keren mas bro menu multinya.

    BalasHapus
  65. Ada gax tutorial cara membuat menu 3 demensi....
    misalnya :
    HOME | TEKNOLOGI>| lINK | LAIN
    TRIK >| BLOG |
    SEO | LAN |
    COM

    kalau ada tlong dikiri ke adiklikdotcom@gmail.com
    terima kasih

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!