Cara Membuat Dropdown Menu Animasi HTML

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.

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%; }