Snippet, Tips Blogger

Responsive Multi Dropdown Menu

Oke, kali ini Saya akan share cara membuat Responsive Multi Dropdown Menu yang bisa Anda terapkan pada blog.

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>

 

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

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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *