Cara Membuat Responsive Menu dengan Multilevel Dropdown

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.

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~

16 Comments

  1. informasi ente sangat bermanfaat gan

  2. Mas bisa buatin thema blog wordpress, yang responsif kah?
    Kalau bisa hubungi ke mana ya?

  3. makasih sudah di share tutorial membuat menu responsive dengan mlti level dropdown,
    berat gak ni buat blog?

  4. ooo, begitu ya mas cara membuatnya agar menjadi responsive, terima kasih 😀

  5. Bagus mas,, tapi kayanya saya tetap lebih milih memakai css deh karna lebih simple :D..

  6. Sementara nyimak dulu…
    Sebetulnya pengen banget bikin menu dropdown…
    Sistem navigasinya akan terlihat lebih jelas, dan lebih keren…
    Terima kasih sudah berbagi…
    Salam blogger…

  7. Wah keren, mau di coba dulu gan, semoga sukses

  8. wah pengen banget bikinnya kayak gini tapi ada yang ajarin step per step boleh ya

  9. KEREN mas ARTIKELNYA .

    Tapi Sya Bingung Nih, Pemasangan Jquerynya dimana si ?

    Cara Masang Jquery Gimana ? Bingung nih .

    Admin Mohon Fast Respon ya.. Di Tunggu Jawabnnya . Masih Newbye

    Salam Dari BLog Mafia dan Fbi :V http://www.pcunik.blospot.co.id

    Pcunik Pengalaman Cerita Unik

  10. saya masih bingung antara penempatan kode jquery, gak bisa ke save dia min 🙁 antara yang jlasnya dimana min

  11. Keren Mas, Boleh ya saya ijin download 🙂

  12. thanks infonya bro,…

  13. Good blog

Tinggalkan Balasan

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