Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Tutorial CSS Tutorial JavaScript/JQuery

Cara Membuat Responsive Menu dengan Multilevel Dropdown

Syakir Rahman
Last updated on April 21st, 2020
18 Comments
Responsive menu

Salah satu posting lama di blog ini pernah membahas tentang cara membuat multilevel dropdown menu yang dikombinasikan dengan Animasi CSS3. Nah, kali ini saya akan membahas versi responsive dari menu ini, walaupun tanpa efek animasi CSS lagi.

Pada desain web masa kini, responsifitas menjadi hal yang penting untuk menunjang performasi dan aksesibilitas sebuah situs. Oleh karena itu, membuat menu responsive menjadi hal yang penting karena navigasi merupakan elemen esensial dalam sebuah web.

Responsive multilevel dropdown menu


Untuk membuat menu responsive yang menarik, interaktif dan kekinian, tidak cukup dengan menggunakan teknik CSS saja. Karena itulah, di posting ini saya menggunakan sedikit polesan jquery agar lebih interaktif.

Tampilan biasa menu ini sama dengan tampilan menu multilevel sebelumnya yang pernah saya buat. Memiliki 3 level dropdown yang muncul ketika parent-nya di-hover, namun hanya muncul saat di klik untuk versi responsivenya.

Untuk lebih jelasnya, yuk kita lihat kode-kodenya dan demonya di bawah ini.

<div class=”menu-wrapper”>
<button class=”menu-toggle”>Menu</button>
<div class=”multi-level-responsive-menu”>
<ul class=”menu”>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a>
<ul>
<li><a href=”#”>Level 1</a></li>
<li><a href=”#”>Level 1</a></li>
<li><a href=”#”>Level 1</a>
<ul>
<li><a href=”#”>Level 2</a></li>
<li><a href=”#”>Level 2</a></li>
<li><a href=”#”>Level 2</a>
<ul>
<li><a href=”#”>Level 3</a></li>
<li><a href=”#”>Level 3</a></li>
<li><a href=”#”>Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
– Selain kode di atas, di antara tag <head> juga anda harus menambahkan kode pemanggilan pada file cssnya.
.menu-wrapper {
margin:10px auto;
position: relative;
width:100%;
}
.menu-wrapper ul{
margin:0;
padding:0;
}
.multi-level-responsive-menu {
background-color: #333;
clear: both;
display: block;
width: 100%;
}
.menu-toggle {
display: none;
}
.multi-level-responsive-menu ul {
padding:0;
display: table;
width: 100%;
list-style: none;
}
.multi-level-responsive-menu ul li ul li:first-child {
border-top: 1px solid #DD3D36;
}
.multi-level-responsive-menu ul li {
position: relative;
display: inline-block;
float:left;
}
.multi-level-responsive-menu ul li:last-child {
border-right: 0;
}
.multi-level-responsive-menu ul li a{
display: block;
text-align: center;
padding:11px 20px;
color:#fff;
text-decoration: none;
line-height: 1;
font-weight: 500;
font-size: 14px;
}
.multi-level-responsive-menu ul li.active a{
background-color:#DD3D36 ;
}
.multi-level-responsive-menu ul li:not(.active) a:hover {
background-color:#DD3D36 ;
}ul.menu li span.arrow-bottom,
ul.menu li span.arrow-right {
position: absolute;
top:15px;
right:7px;
border:5px solid transparent;
width:0;
height:0;
}
ul.menu li span.arrow-bottom {
border-top-color: #fff;
}
ul.menu li span.arrow-right {
border-left-color: #fff;
}
@media(min-width: 768px) {
.multi-level-responsive-menu ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
height: 0;
width: 0;
background-color: #333;
-webkit-transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
transition:opacity 0.5s;
top:100%;
left: 0;
padding: 0;
min-width: 200px;
}
.multi-level-responsive-menu ul li ul li{
white-space: nowrap;
display: block;
width: 100%;
}
.multi-level-responsive-menu ul li ul li a {
width: 100%;
border-radius: 0;
color:#fff;
padding:10px 20px;
text-align: left;
}
.multi-level-responsive-menu ul li a i {
margin-left: 10px;
float: right;
font-weight: 500;
margin-top: 5px;
}
.multi-level-responsive-menu >ul >li:hover >ul {
visibility: visible;
opacity: 1;
height: auto;
width: auto;
display: block;
z-index: 999;
}
.multi-level-responsive-menu >ul >li >ul li:hover >ul {
visibility: visible;
opacity: 1;
height: auto;
width: auto;
display: block;
z-index: 999;
left:100%;
top: 0;
}
.multi-level-responsive-menu >ul >li >ul li >ul li:hover >ul{
visibility: visible;
opacity: 1;
height: auto;
width: auto;
display: block;
z-index: 999;
left:100%;
top: 0;
}
}
@media (max-width: 767px) {
button.menu-toggle {
display: block;
color: #fff;
background-color: #333;
border:0;
padding:10px 20px;
text-align: right;
width: 100%;
outline: none;
cursor: pointer;
}
button.menu-toggle.active {
background-color: #DD3D36;
}
.multi-level-responsive-menu {
display: table;
}
.multi-level-responsive-menu ul.menu {
display: none;
}
.multi-level-responsive-menu ul li {
display: block;
width: 100%;
float: none;
}
.multi-level-responsive-menu ul li a{
text-align: left;
padding:10px;
}
.multi-level-responsive-menu ul li ul {
width: 100%;
position: relative;
left:0 !important;
padding-left: 10px;
display: none;
}
}
Kode diatas harus anda tempatkan di file style.css atau diantara tag <style> dan </style> pada file htmlnya.
// Responsive Menu
$(“.menu-toggle”).click(function(e) {
e.preventDefault();
$(this).toggleClass(“active”);
$(“.multi-level-responsive-menu ul.menu”).slideToggle();
});
$(“ul.menu >li >ul”).siblings(“a”).prepend(“<span class=’arrow-bottom’></span>”).addClass(“slidedown”);
if (document.documentElement.clientWidth < 769) {
jQuery(“ul.menu >li >ul li ul”).siblings(“a”).prepend(“<span class=’arrow-bottom’></span>”).addClass(“slidedown”);
jQuery(“.slidedown”).click(function(e) {
e.preventDefault();
jQuery(this).siblings(“ul”).slideToggle();
});
}
else if(document.documentElement.clientWidth > 769){
jQuery(“ul.menu >li >ul li ul”).siblings(“a”).prepend(“<span class=’arrow-right’></span>”);
}
– Selain kode di atas, di antara tag <head> atau di footer anda harus menambahkan kode pemanggilan pada file library jquery dan scriptnya.

Jika ingin lebih jelas, silahkan lihat demonya dan download file bundlenya lewat link di bawah ini. Anda bisa membedahnya secara offline agar bisa memahaminya.

DemoDownload

Bagaimana menurut anda ?. Oh ya, untuk melihat versi responsivenya jangan lupa untuk meresize browser anda, lalu refresh halamannya. Hal ini karena metode responsive pada teknik ini sebagian dilakukan lewat javascript/jquerynya dengan mendeteksi lebar layar saat halaman di load. Karena itulah, performa responsivenya tidak sefleksibel dengan CSS murni. Tapi, itu tidak masalah. Memangnya ada pengunjung website yang datang terus meresize browsernya sebelum mereka membaca ?. Kecuali kalau pengunjungnya adalah developer juga.

Yap, itulah responsive menu yang bisa saya bagikan kali ini. Jika ada pertanyaan, silahkan berkomentar di bawah 🙂

Semoga bermanfaat.

~Muhammad Syakirurohman~

18 thoughts on “Cara Membuat Responsive Menu dengan Multilevel Dropdown”

Tinggalkan Balasan

© Copyright Devaradise. All rights reserved. Theme: Devaradise 2020 by Syakir Rahman.