How to Make Responsive Menus with Multilevel Dropdown - Devaradise

One of the old posts on this blog discussed how to create multilevel dropdown menus combined with CSS3 Animations. Well, this time I will discuss responsive versions of this menu, even without CSS animation effects anymore.

In today’s web design, responsiveness is important to support the performance and accessibility of a site. Therefore, making responsive menus become important because navigation is an essential element in a website.

To create responsive menus that are interesting, interactive and up to date, it is not enough to use CSS techniques alone. For this reason, in this post, I use a bit of jquery polish to make it more interactive.

The normal appearance of this menu is the same as the previous multilevel menu display that I’ve made. Has 3 level dropdowns that appear when the parent has hovered, but only appears when clicked on for the responsive version.

For more details, let’s see the codes and demos below.

• HTML
• CSS
• Jquery

– In addition to the above code, between tags

Also, you have to add the calling code to the CSS file.

. menu-wrapper {
margin: 10px auto;
position: relative;
width: 100%;
}
.menu-wrapper ul {
margin: 0;
padding: 0;
}
.mti-level-responsive-menu {
background-color: # 333;
clear: both;
display: block;
width: 100%;
}
.menu-toggle {
display: none;
}
.mti-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;
}
.mti-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;
}
.mti-level-responsive-menu ul li ai {
margin-left: 10px;
float: right;
font-weight: 500;
margin-top: 5px;
}
.mti-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;
}
.mti-level-responsive-menu {
display: table;
}
.mti-level-responsive-menu ul.menu {
display: none;
}
.mti-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;
}
}

You must place the above code in the style.css file or between tags

in the HTML file.

// 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 (” “) addClass (” slidedown “);
if (document.documentElement.clientWidth  li> ul li ul”). siblings (“a”). prepend (” “) 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 (” “)
}
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 (” “)
}
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 (” “)
}

– In addition to the code above, between tags

or in the footer, you must add the calling code to the jquery library file and the script.

If you want more details, please see the demo and download the bundle file via the link below. You can dissect it offline so you can understand it.

What do you think? Oh yes, to see the responsive version don’t forget to resize your browser, then refresh the page. This is because the responsive method in this technique is partly done through javascript/jquery by detecting the width of the screen when the page is loaded. For this reason, responsive performance is not as flexible as pure CSS. But, that doesn’t matter. Do website visitors come to resize their browser before they read? Unless the visitor is a developer too.

Yep, that’s the responsive menu I can share this time. If you have questions, please comment below

Hope it is useful.

Share this post