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~

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 *