Responsive Multi Dropdown Menu - Tidak terasa sudah satu ahad Saya tidak update blog ini hehe... Okelah, kali ini Saya akan share cara menciptakan responsive multi dropdown hidangan yang dapat Anda terapkan pada blog.
Menu ini Saya buat atas seruan dari saudara Choirul pada komentar artikel ini
Mari kita mulai cara pembuatannya. Dalam membangun suatu elemen hidangan langkah pertama yang kita butuhkan yakni HTML, berikut arahan HTML pada hidangan yang sudah Saya buat
<nav> <a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> <ul class="menu"> <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> <li><a href="#">Sub-Menu 4</a></li> <li><a href="#">Sub-Menu 5</a></li> </ul> </li> <li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li> <li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> <li><a href="#">Sub-Menu 3</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li> <li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> <li><a href="#">Sub-Menu 3</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li> <li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li> <li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li> </ul> </nav>See the Pen Menu Markup by (@arlinadesign) on CodePen.
Menu di atas masih merupakan murni HTML dan jikalau ingin menciptakan hidangan tersebut berfungsi dengan baik dan tampilannya menjadi lebih menarik maka pada langkah berikutnya yang kita butuhkan yakni penambahan CSS dan fungsi jQuery.
Berikut arahan CSS dan jQuery yang sudah Saya buat sedemikian rupa menyesuaikan dengan kerangka hidangan HTML di atas.
nav { display: block; margin-top: 100px; background: #374147; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0; } .menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: #fff; background: #9ca3da; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #9ca3da; color: #fff; } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #9ca3da; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; margin-top: 100px; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #9ca3da; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; } } @media (max-width: 480px) { } @media (max-width: 320px) { }<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ var touch = $('#resp-menu'); var hidangan = $('.menu'); $(touch).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 767 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); //]]> </script>Setelah ditambahkan, maka kesudahannya akan terlihat ibarat demo di bawah ini
Cukup sekian untuk artikel kali ini mengenai Responsive Multi Dropdown Menu, selamat mencoba.