Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Cara Membuat Dropdown Menu 3 Level + Efek Animasi CSS3

3 level dropdown menu

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 thoughts on “Cara Membuat Dropdown Menu 3 Level + Efek Animasi CSS3

Tinggalkan Balasan