Responsive Multi Dropdown Menu di Blogger

Oke pada kesempatan kali ini saya akan share Responsive Multi Dropdown Menu di Blogger bagaimana cara membuat nya langsung aja simak tutorial berikut ini. 

Mari kita mulai cara pembuatannya. Dalam membangun suatu elemen menu langkah pertama yang kita butuhkan adalah HTML, berikut kode HTML pada menu 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 Arlina Code (@arlinacode) on CodePen.

Menu di atas masih merupakan murni HTML dan jika ingin membuat menu tersebut berfungsi dengan baik dan tampilannya menjadi lebih menarik maka pada langkah berikutnya yang kita butuhkan adalah penambahan CSS dan fungsi jQuery.

Berikut kode CSS dan jQuery yang sudah Saya buat sedemikian rupa menyesuaikan dengan kerangka menu 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:0;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:0;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>
//<![CDATA[
$(document).ready(function(){var e=$("#resp-menu"),n=$(".menu");$(e).on("click",function(e){e.preventDefault(),n.slideToggle()}),$(window).resize(function(){$(window).width()>767&&n.is(":hidden")&&n.removeAttr("style")})});
//]]>
</script>

Setelah ditambahkan, maka hasilnya akan terlihat seperti demo di bawah ini

• Result

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

Share :