Cara Membuat Dropdown Menu 3 Level + Efek Animasi CSS3

Yap, pada kamis kali ini saya akan sharing tutorial membuat multilevel dropdown menu dengan efek animasi CSS3 keren. Bagi yang belum tahu, Dropdown menu adalah menu yang ketika disentuh dengan mouse (hover), akan keluar sub-menu-nya. Multilevel dropdown menu berarti menu yang sub-menunya memiliki sub menu lagi lebih dari 2 tingkat (banyak). Jadi, dropdown menu 3 level yang akan dibahas disini termasuk multi level dropdown menu.

3 level dropdown menu

Dropdown menu sangat bermanfaat untuk membuat taksonomi menu secara terstruktur. Biasanya digunakan jika menu pada website merupakan link kategori yang memiliki beberapa sub kategori. Dengan adanya dropdown menu, navigasi website menjadi mudah dan user-friendly.

So, bagaimana cara membuatnya? yuk simak bareng-bareng.

Kode HTML

<div class=”menu-wrapper”>
<ul class=”menu-horizontal”>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3 <span class=”arrow”></span></a>
<ul class=”submenu level-1″>
<li><a href=”#”>Level 1</a></li>
<li><a href=”#”>Level 1 <span class=”arrow”></span></a>
<ul class=”submenu level-2″>
<li><a href=”#”>Level 2</a></li>
<li><a href=”#”>Level 2  <span class=”arrow”></span></a>
<ul class=”submenu level-3″>
<li><a href=”#”>Level 3</a></li>
<li><a href=”#”>Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Kode CSS

.menu-wrapper {
margin:10px auto;
position: relative;
width:700px;
}
.menu-wrapper ul{
margin:0;
padding:0;
background-color: #333;
}
ul.menu-horizontal {
width:100%;
position: relative;
z-index:999;
}
ul.menu-horizontal li {
list-style: none;
}/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#DD3D36;
-webkit-transition:all 0.5s ease-in-out;
}

/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}ul.submenu li {
position: relative;
}

/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li ul li:hover ul.level-3 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

Tidak seperti biasanya, untuk tutorial yang satu ini saya tidak akan menjelaskan kode-kodenya karena pasti akan sangat rumit dan panjang. Sebagai gantinya, saya menjelaskannya secara langsung dengan comment di dalam kode. Sementara, untuk hasilnya anda bisa lihat demo dibawah ini :

Sementara untuk link downloadnya ada disini : http://goo.gl/bwTBnL

Bagaimana? tertarik.. jangan lupa langsung praktekkan. Jika bermanfaat, bagikan ke teman dengan share ke media sosial. Jangan lupa datang lagi hari senin dan kamis depan karena akan ada artikel perdana lainnya yang menunggu anda!.

Sekian, Semoga bermanfaat..

~Muhammad Syakirurohman~

what is cipro usually prescribed for finasteride 5mg side effects viagra nebenwirkungen cialis voucher side effects of azithromycin cialis from canada buy viagra online how to use viagra what is ciprofloxacin used for tamoxifen cost viagra vs cialis levitra vs viagra viagra tablet ciprofloxacin dose azithromycin without a doctor’s prescription ciprofloxacin eye drops viagra from canada acyclovir 800 mg viagra for women azithromycin side effects cipro for uti cialis 30 day trial coupon lexapro bula viagra for sale uk lexapro dosage post finasteride syndrome viagra 50mg cialis professional azithromycin 250mg lexapro side effects in women finasteride dosage online cialis cialis vs viagra azithromycin 5 day dose pack azithromycin 250 mg treatment erectile dysfunction cialis liquid cialis ciprofloxacin 250mg cialis pricing cialis generic azithromycin 500 cipro discount cialis viagra alternatives lexapro dosages what is lexapro viagra 100mg tablets retail price lexapro medication zovirax pills withdrawal from lexapro tamoxifen and foods to avoid azithromycin for pneumonia cialis cost canada viagra acyclovir dosage for cold sores finasteride permanent side effects cialis coupons finasteride medication cialis testimonials utilisation viagra cealis how to take cialis how much does cialis cost how does viagra work azithromycine 250 mg how long does viagra last side effects of finasteride cost of cialis generic for lexapro celexa vs lexapro side effects of lexapro in women ciprofloxacin uses levitra without a doctor prescription cialis for bph levitra prezzo in farmacia cialis 5mg daily viagra substitute effects of stopping finasteride cialis dosage lexapro 20mg ciprofloxacin hcl 500 mg tab viagra wikipedia where to buy viagra cialis 20 mg cialis canada herbal viagra what is azithromycin used for finasteride side effects in men lexapro para que sirve acyclovir finasteride and enlarged prostate azithromycin coverage cialis copay card zovirax viagra pills cheap viagra ciprofloxacin 500mg cialis free trial cialis 20mg directions viagra for men azithromycin 500 erfahrungen viagra uk lexapro vs wellbutrin cipro antibiotic buy viagra ciprofloxacin ophthalmic solution azithromycin levitra rezeptfrei deutschland ciprofloxacin dosage wholesale cialis azithromycin pregnancy category finasteride vs dutasteride side effects of cialis cialis dosage strengths azithromycin tablet cheap cialis viagra vs cialis vs levitra azithromycin 250mg tablets 6 pack finasteride 5mg viagra canada buy levitra online lexapro manufacturer website levitra bayer 20mg meilleur prix viagra alternative what does ciprofloxacin treat levitra cialis 5 mg azithromycin vs erythromycin cialis reviews lexapro benefits for women tamoxifen lawsuits ciprofloxacin class cyalis how does cialis work azithromycin drug class propecia cipro dosage what does ciprofloxacin 500mg treat ciprofloxacin side effects in women viagra without a doctor prescription ciprofloxacin side effects after age 60 ciprofloxacin 500mg tablets tamoxifen side effects in women over 55 side effects of tamoxifen tamoxifen interaction viagra ohne rezept aus deutschland tamoxifen side effects of lexapro viagra generic what is cipro used for ciprofloxacin hydrochloride azithromycin z pak generic cialis tadalafil viagra receptfritt ciprofloxacin 500 ciprofloxacin hcl viagra single packs viagra cialis pills for sale finasteride side effects generic cialis cialis cheap cialis alternative ciprofloxacin for dogs cipro antibiotics ciprofloxacin coverage what is lexapro for ciprofloxacin hcl 500 mg cost of viagra ciprofloxacin 500 mg for urinary tract infection viagra cialis finasteride long term effects is lexapro a controlled substance cialis patent expiration cialis 5mg azithromycin 250 ciprofloxacin drug class viagra for sale canada cialis zithromax antibiotic does lexapro cause weight gain tamoxifen citrate what is finasteride levitra 20 mg von bayer viagra medicine escitalopram nebenwirkungen tamoxifen side effects viagra tablets what bacteria does ciprofloxacin kill generic levitra vardenafil 20mg pfizer viagra viagra coupons ciprofloxacin bnf order viagra cialis samples overnight buy generic levitra generic levitra cipro and tendonitis viagra on line no prec acyclovir medication what is cipro finasteride 5 mg tab antibiotic ciprofloxacin levitra coupons cialis medication viagra bestellen cilias ciprofloxacin spc vardenafil 20mg canadian cialis levitra 10 mg prezzo what is ciprofloxacin prescribed for how does acyclovir work what is escitalopram viagra kaufen what is azithromycin cialis price cialis trial levitra 20 mg precio farmacia online viagra azithromycin three times a week what does azithromycin treat cialis pills cialis effects cialis without a doctor’s prescription acyclovir 400 mg side effects of lexapro 10 mg cialis generic availability tamoxifen and bone pain cialis daily finasteride efectos secundarios ciprofloxacin nebenwirkungen levitra 20 mg cost walmart cialis or viagra zovirax cream viagra 100 mg cialis patent expiration 2017 side effects lexapro azithromycin 250 mg viagra samples zovirax ointment cialis coupon 20 mg cialis vs viagra cialis savings card lexapro withdrawal cialis discount cialis for sale side effects of acyclovir viagra without a doctor prescription usa acyclovir 400mg escitalopram 20 mg daily cialis cialis samples 9 levitra at walmart azithromycin pediatric dosing viagra side effects what is acyclovir escitalopram 10mg canadian viagra viagra generico lexapro 5mg viagra ohne rezept auf rechnung levitra erfahrungen what is finasteride used for zithromax cialis patent expiration date extended first few days on lexapro azithromycin and alcohol ciprofloxacin 500 mg tabletten cialis tadalafil weaning off lexapro over the counter viagra how to get off lexapro acyclovir vs valacyclovir viagra effects azithromycin for uti viagra online viamedic cialis azithromycin eye drops tamoxifen and weight gain zithromax z-pak what is ciprofloxacin viagra prices cipro 500 lexapro 10mg levitra generic acyclovir dosing acyclovir side effects what is azithromycin for finasteride effets secondaires ciprofloxacin side effects escitalopram side effects 200 cialis coupon cialis coupons 2017 cialis coupons printable cialis for women women viagra viagra on line buy cialis online side effects of ciprofloxacin lexapro and weight gain finasteride results zovirax dosage acyclovir ointment 5 azithromycin uses cialis dosage recommendations cialis otc finasteride hair loss cipro drug class lexapro overdose ciprofloxacin hydrochloride ophthalmic cialis coupon escitalopram oxalate what does finasteride do viagra wiki buy generic viagra azithromycin class lexapro generic name acyclovir 800mg escitalopram 10 mg para que sirve zithromax dosage how to wean off lexapro is azithromycin penicillin azithromycin pregnancy tamoxifen bijwerkingen cialis canadian pharmacy tamoxifen side effects in women generic viagra lexapro vs celexa viagra pill when will cialis go generic generic lexapro buying viagra stopping lexapro escitalopram cipro side effects viagra price viagra cost ciprofloxacin hcl 500 mg side effects lexapro side effects in men finasteride tablets nolvadex levitra online buy levitra azithromycin dosage cipro uses generic viagra 100mg what is cialis viagra activate viagra costs viagra sex revatio vs viagra lexapro cialis online cialis generic tadalafil lexapro withdrawal symptoms levitra vs viagra is azithromycin ciprofloxacin dosierung lexapro generic levitra dosage acyclovir ointment cialis side effects what is acyclovir for is ciprofloxacin a penicillin azithromycin cost sophia viagra cialis for daily use cialis natural viagra lexapro side effects viagra coupon azithromycin 500 mg zovirax for cold sores ciprofloxacin 500mg antibiotics side effects acyclovir 800 mg 5 times a day finasteride 5mg side effects mayo clinic is tamoxifen chemotherapy escitalopram effets secondaires ciprofloxacin 500 mg lexapro and weight gain in women female viagra what is viagra thuoc azithromycin sex viagra for women zoloft vs lexapro equipe argentine viagra lexapro for anxiety azithromycin liquid generic for cialis ciprofloxacin 250 mg acyclovir dose how to wean off lexapro without withdrawals viagra vs cialis vs levitra best price viagra viagra en ligne livraison 24h finasteride 5 mg what is tamoxifen used for viagra soft lexapro coupons levitra vs viagra for hardness how does lexapro work side effects of azithromycin 250 mg lexapro and wellbutrin combination therapy how long for lexapro to work levitra coupon acyclovir for shingles cialis 10 mg side effects of viagra lexapro weight gain azithromycin 500mg effects of stopping lexapro suddenly side effects of ciprofloxacin 500 mg cialis 30 day sample acyclovir 200mg what is acyclovir used for lexapro vs zoloft buy cialis acyclovir cream ciprofloxacin 500mg antibiotics cipro side effects in elderly what does viagra do ciprofloxacin pfizer viagra coupons from pfizer viagra sans ordonnance cialis coupons from manufacturer viagra tesco what is tamoxifen cialis website levitra 20 mg viagra 100 azithromycin medscape viagra natural zithromax 500 mg tamoxifen therapy ciprofloxacin used for common side effects of ciprofloxacin 500 mg azithromycine eg 500 mg bijsluiter how long for azithromycin to take effect finasteride for hair loss levitra 20mg cost per pill viagra vs cialis finasteride reviews lexapro and weight loss finasteride 5mg tab side effects of finasteride 5mg generic cialis at walmart tamoxifen nebenwirkungen propecia side effects cheap levitra cialis coupon print what works better than viagra cialis prices cialis 20mg azithromycin tablets viagra 100mg azithromycin for strep throat ciprofloxacin drops escitalopram 10 mg cipro dangers lexapro 10 mg finasteride for women cialis on line what is lexapro used for cialis for men tamoxifen langzeitfolgen finasteride 1mg what infections does ciprofloxacin treat acyclovir 800 mg for shingles lexapro dosing cialis pharmacy prices free viagra levitra prices viagra dosage levitra 20mg lexapro reviews finasteride wellbutrin and lexapro acyclovir for cold sores price cialis lowest cialis prices acyclovir dosage cialis sample free cialis lexapro side effects men azithromycine vardenafil vs viagra discount viagra cialas viagra pillen kruidvat

64 Comments

  1. keren gan, ane coba dulu tapi apa ini sudah valid html5 mas?

  2. Nice banget gan tutorialnya…. ane coba deh diblog satu lagi bikin menu dropdown keren kayak gini

  3. Mantap Gan Trik nya, Thx ya

  4. Mantep cuy.. Ijin coba 😀

    Btw, blog ini dari wordpress kan?

  5. mas boleh minta sorce code nya yg dah jadi ..
    soalnya yg ini dah kucoba tapi gak nampil efeknya..
    klo boleh di kirim via email aja ya mas..
    Terimakasih

  6. wah keren sub menu animasi

    kunjungi juga blog saya mas
    masih simple sih 😀

    http://kewelscience.blogspot.com
    kewelscience.blogspot.com

  7. Wah.. boleh di coba nih gan… tipsnya buat belajaran.

  8. Ni baru top ijin coba

  9. enakan yang simple simple aja mas

  10. kunjungan pertama yang mengesankan gan…akan sy coba…semoga berhasil

  11. Woish keren binggo hep’s

  12. vroh, ini bisa di taroh di blogspot ga ? ajarin cara masangnya dong :((

    • Bisa kok, sayangnya saya tidak bisa menulis tutorialnya secara spesifik di blog ini karena tiap template blog mempunyai struktur html yang berbeda-beda.. Termasuk dimana letak menu tersebut..

      Lebih baik pelajari dulu saja semuanya. silahkan download dan coba sendiri. Nanti kalo udah ngerti pasti bisa sendiri buat pasang di blognya.

      • ooh gitu ya, secara singkat aja, css ditaruh dimana, html ditaruh dimana…., makasih ya…. butuh bgt cara masangnya…

      • Kalau CSS-nya silahkan tempatkan di atas kode ]]></b:skin>, kalo HTML-nya ini yang ga bisa saya jelaskan, karena saya sama sekali tidak tahu struktur kode html blog agan, dan setiap blog mempunyai struktur kode yang berbeda-beda.. Kalo mau coba-coba sih, cari aja kode untuk menu blog yang sudah ada, lalu ganti dengan kode html di atas.. Kode tersebut pastinya ada di antara tag <body> dan </body>.. Silahkan dicoba

      • okay, thanks sekali gan, sangat membantu 🙂

      • Sip, sama-sama 🙂

  13. keren, dicoba terapkan di blog 🙂

  14. terimakasih gan, ini yang saya cari2 sukses truz!!!

  15. Tiana Paytren Pontianak

    Alhamdulillah…kelihatannya simpel gan, saya coba dulu 😉

  16. mas. cara menentukan posisi menu nya dmn?
    saya mau ubah menu nya ke kiri

  17. nah mas ini yg saya cari,,,
    thanks banget ya mas …

  18. itu masang nya dimana gan? di blog bukan? kalo di blog masukin nya di template apa di laman?

  19. KURANG RESPONSIF

  20. keren… maaf cara nyimpen nya gimana mas,,, di masukin dalam satu page aja kode css sama html nya ato beda page ??

  21. Thx gan bermanfaat banget ^-^ segera diterapkan
    pertanyaan : template saya udh ada menu dropdownnya tapi saya gk tau ngerubahnya gimana…? 😮
    kunbal >> http://lspega.blogspot.com

  22. keren mas, tapi kalo mo ngambil data daftar menu ngambil dari database, script php-nya gimana ya?

  23. Sangat sederhana. Izin nyoba. ..

  24. tq y gan, bermanfaat bagi ane

  25. kalau seumpama diganti onclick bisa nggak?

    dropdownnya itu kan tinggal mengarahkan kursornya
    jika diganti dengan di klik baru muncul dropdownnya apakah bisa?

  26. Maaf newbie nih mas, menu css nya di simpan dimana didalam kode html? apa disembarang tempat? Trims infonya

  27. saya akan berguru dg blog ini sebap apa yg saya cari ada di blog ini….saya sangat pengen mahir dlm css dan html. Apa bila saya brhasil di sini maka akn bnyk blog yg akan berkunjung ke blog nya syakiruro. Saya yakin itu. slm

  28. terima kasih mas syakir rahman, sangat bermanfaat sekali bagi saya, semoga bermanfaat. amiin

  29. Terimakasih Mas berhasil

  30. Cara bikin Dropdown menu di blogger gimana ya mas?

  31. Gan css nya terlalu panjang dan lama di load >>
    ini dia versi cepatnya : irit 603Byte lumayan percepat blog
    ——————————————————
    .menu-wrapper{margin:10px auto;position:relative;width:700px}.menu-wrapper ul{margin:0;padding:0;background-color:#333}ul.menu-horizontal{width:100%;position:relative;z-index:999}ul.menu-horizontal li{list-style:none}ul.menu-horizontal>li{display:inline-block}ul.menu-horizontal li a{position:relative;display:block;padding:10px 20px;text-decoration:none;color:#eee}ul.menu-horizontal li a:hover{background-color:#dd3d36;-webkit-transition:all .5s ease-in-out}ul.menu-horizontal>li>a>span.arrow{width:0;height:0;border:5px solid transparent;border-top:7px solid #eee;position:absolute;right:5px;top:17px}ul.menu-horizontal li ul li span.arrow{width:0;height:0;border:5px solid transparent;border-left:7px solid #eee;position:absolute;right:5px;top:17px}ul.submenu{position:absolute;display:none}ul.submenu li{position:relative}@-webkit-keyframes mantul-vertikal{0%{top:-300px;opacity:0}50%{top:120%;opacity:1}75%{top:80%;opacity:1}100%{opacity:1;top:100%}}@keyframes mantul-vertikal{0%{top:-300px;opacity:0}50%{top:120%;opacity:1}75%{top:80%;opacity:1}100%{opacity:1;top:100%}}@-webkit-keyframes mantul-horizontal{0%{left:300%;opacity:0}50%{left:80%;opacity:1}75%{left:110%;opacity:1}100%{left:100%;opacity:1}}@keyframes mantul-horizontal{0%{left:300%;opacity:0}50%{left:80%;opacity:1}75%{left:110%;opacity:1}100%{left:100%;opacity:1}}ul.menu-horizontal li:hover ul.level-1{min-width:150px;display:block;top:100%;-webkit-animation:mantul-vertikal 1s;animation:mantul-vertikal 1s}ul.menu-horizontal li ul li:hover ul.level-2{min-width:150px;display:block;-webkit-animation:mantul-horizontal 1s;animation:mantul-horizontal 1s;top:0;left:100%}ul.menu-horizontal li ul li ul li:hover ul.level-3{min-width:150px;display:block;-webkit-animation:mantul-horizontal 1s;animation:mantul-horizontal 1s;top:0;left:100%}
    ——————————————————

  32. Mantap mas fadel tambahannya.. terima kasih banyak.. bagi pembaca lain yang menggunakan animasi ini tanpa ada niat mengeditnya, sebaiknya cssnya diganti saja sama versi compressnya mas fadel ini (y)

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *