Multilevel Toggle Responsive Navigation Menu

Sourabh Somani
9y
14.4k
0
3

Article

Introduction

This multilevel toggle responsive navigation is similar to the nested accordions on the smaller screen. When the user clicks or touches the parent on the menu bar, then the dropdown submenu will be opened and if he touches the sub menu then the submenu's submenu will be opened. There will be one toggle button that will be clickable.

Now let's start with designing a HTML layout.

This article will add prefixfree.min.js to the layout that automatically adds a prefix to CSS properties to help keep the prefix free and the style sheet cleaner.

Now add the following lines of code for the navigation menu:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multilevel Toggle Responsive Navigation Menu</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="prefixfree.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav><div class="menu-btn"><img src="btn-hamburger.png" alt=""></div>
<ul class="menu">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a>
<ul>
<li><a href="#">Sub Item 1.2.1</a></li>
<li><a href="#">Sub Item 1.2.2</a>
<ul>
<li><a href="#">Sub Item 1.2.2.1</a></li>
<li><a href="#">Sub Item 1.2.2.2</a>
<ul>
<li><a href="#">Sub Item 1.2.2.2.1</a></li>
<li><a href="#">Sub Item 1.2.2.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sub Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</nav>
<div class="container">
</div>
</body>
</html>

By using the preceding code your output page will be as follows:

Now we are adding some styles to our navigation bar. The code is as follows:

body, ul, li,a {
margin: 0;
padding: 0;
list-style: none;
}
.menu{
background: rgba(44, 62, 100, 0.99);
}
.menu a{
display: block;
text-decoration: none;
padding: 20px 30px;
color: #fff;
border: 1px solid #000000;
}
.menu li{
position: relative;
}
.menu li ul{
display: block;
background: rgba(255, 0, 0, 0.12);
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
nav{
transition: max-height 0.3s;
overflow: hidden;
}
.menu-btn{
background: #232d3b;
text-align: center;
cursor: s-resize;
}
.menu-btn img{
vertical-align: middle;
height: 50px;
}
.menu-open,
.menu .open > ul{
max-height: 2000px;
}
.menu .open > .more img{
transform: rotate(-90deg);
}
.more img{
height: 55px;
transition: transform 0.3s;
}
.more{
background: rgba(0, 0, 0, 0.38);
float: right;
min-width: 10%;
cursor: move;
}

Using the preceding CSS code your page will look such as in the following:

As you can see that this toggle menu is just for the smaller screen or we can say for a phone or tablet screen only. So for a bigger screen (Laptop, Desktop and so on) I am writing some media query as shown below and including this media query with this same CSS file.

Media query:

@media all and (min-width: 900px){
nav{
max-height: 100%;
overflow: visible;
}
.menu-btn{
display: none;
}
.menu{
text-align: center;
}
.menu a{
width:9em;
background: #232d3b;
}
.menu a:hover{
background-color: #099;
}
.menu > li{
display: inline-block;
margin: 0 2px;
}
.menu li ul{
left: -9999px;
position:absolute;
overflow: visible;
-webkit-transition: all 0.1s ease;
}
.menu > li > ul ul{
top: 0;
}
.menu li:hover > ul{
left:100%;
}
.menu > li:hover > ul{
left: 0;
}
.menu .open > ul{
left:100%;
}
.menu > li.open > ul{
left: 0;
}
}

The preceding styles or media query overrides the previous style when the screen is larger than 900 pixels. When the screen is larger than 900 pixels then the output will be as follows:

Now I am adding some jQuery functions to add the following functionality to our menu.

Add a .parent class to make the list item having a sub-menu easier that will hold a list inside the parent.
Add a div with the class .more holding a hamburger.png image that will be used for the toggle button.
When the .more button is clicked its parent list item should expand to its original height using the .open class.
The .menu-btn class that will be responsible between the hidden and visible states of toggle.

Add the following lines of code to the Head Section of the HTML page.

<script>
$(document).ready(function(){
$(".menu li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
var menux = $('.menu li a.parent');
$( '<div class="more"><img src="btn-hamburger.png" alt=""></div>' ).insertBefore(menux);
$('.more').click(function(){
$(this).parent('li').toggleClass('open');
});
$('.menu-btn').click(function(){
$('nav').toggleClass('menu-open');
});
});
</script>

By using the preceding code the output will be: