Responsive Multi Dropdown Menu

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 sajian 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 sajian langkah pertama yang kita butuhkan ialah HTML, berikut instruksi HTML pada sajian 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 sajian tersebut berfungsi dengan baik dan tampilannya menjadi lebih menarik maka pada langkah berikutnya yang kita butuhkan ialah penambahan CSS dan fungsi jQuery.

Berikut instruksi CSS dan jQuery yang sudah Saya buat sedemikian rupa menyesuaikan dengan kerangka sajian 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 sajian  = $('.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 akibatnya akan terlihat ibarat demo di bawah ini

Result

Cukup sekian untuk artikel kali ini mengenai Responsive Multi Dropdown Menu, selamat mencoba.

Tweet

Subscribe to receive free email updates: