toggle navigation

The multi-toggle responsive navigation on smaller screens is similar to nested accordions, the user touches primary level parent item to reveal list under it and when the screen is big enough vertical toggle menu changes to horizontal drop down navigation. Usually in toggle navigation on small screen the primary item of navigation is disabled and is only used as toggle button for opening and closing sub-menus, but i want my multi-toggle menu’s primary level parent item to have an active link and a small button at the right of menu item (big enough to be clickable) and this practice is also good for user experience. Look at this figure below.

This is how usually it is:

This is how toggle navigations is
This is how toggle navigation are mostly.

This is how i want it to be:

This is how i want toggle to work. Link remaining active.
This is how i want toggle to work. Link remaining active.

Lets start by creating HTML layout

HTML Layout

In this tutorial we will add prefixfree.min.js to our layout which automatically add prefix to CSS properties and helps to keep CSS prefix free and style-sheet cleaner. Don’t forgot to include btn-hamburger.png file in your folder.

Add the following lines of code for navigation menu.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Dropdown</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="#">Electronics</a>
   <ul>
    <li><a href="#">Laptops</a></li>
    <li><a href="#">Mobiles</a>
     <ul>
      <li><a href="#">Apple</a></li>
      <li><a href="#">Nokia</a>
       <ul>
       <li><a href="#">Asha</a></li>
       <li><a href="#">Lumia</a>
       <ul>
        <li><a href="#">Lumia 520</a></li>
        <li><a href="#">Lumia 720</a></li>
       </ul>
       </li>
      </ul>
      </li>
     </ul>
    </li>
    <li><a href="#">Cameras</a></li>
   </ul>
  </li>
  <li><a href="#">Men</a>
   <ul>
    <li><a href="#">Clothing</a>
     <ul>
      <li><a href="#">New</a></li>
      <li><a href="#">All</a></li>
     </ul>
    </li>
    <li><a href="#">Footwear</a></li>
   </ul>
  </li>
  <li><a href="#">Women</a></li>
  <li><a href="#">Offers</a></li>
 </ul>
 </nav>
 <div class="container">
 <!--content here-->
 </div>
</body>
</html>

Div is class container is where your websites other content resides.

Add some Style to your Navigation

Add the following lines of code to style your toggle navigation for smaller screens, some features of this are:

  • We used background-colors in rgba color mode to give partial transparency to multi-level sub-menus, so that they could be separated with different colors due to opaque overlapping backgrounds (see working demo to know what i mean).
  • We used max-height property instead of height because transitions do not work of height with a value of auto, and we have to use auto as we don’t know what final height will be. I explained CSS3 transition height 0 to auto here.
body, ul, li,a {
 margin: 0;
 padding: 0;
 list-style: none;
}
.menu{
 background: rgba(44, 62, 80, 0.99);
}
.menu a{
 display: block;
 text-decoration: none;
 padding: 20px 30px;
 color: #fff;
 border: 1px solid #1d2531;
}
.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;
}

Above highlighted CSS is used to add functionality classes which i will explain later after java script.

adding style for smaller screens
adding style for smaller screens

As you can see this toggle menu is just for smaller screen right now, we can use drop-down horizontal navigation explained in previous tutorial for bigger screen (as the navigation markup is same) with the help of media queries, add the following style rules at the end of CSS.

@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: #1ABC9C;
}
.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;
}
}

These styles override the previous style when screen width is bigger than 900px. You can learn about horizontal drop down menu from previous tutorial.

Multi toggle navigation when screen is bigger than 900px
Multi toggle navigation when screen is bigger than 900px

Lets jump in jQuery part

We need jQuery to perform following functions.

  • add .parent class to ease list item having a sub-menu (holds a list inside of it).
  • Then we want to add a div with class .more holing a hamburger.png image (used as a toggle button).
  • When .more button is clicked its parent list item should expand to its original height using .open class.
  • finally it should be able to toggle .menu-btn between hidden and visible states.

add the following line of code before closing </head> tag.

<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>

Explaining this above jQuery code:

  • $(".menu li a").each(function(){...}) will select each a element and add .parent class to it, it this a element holds a child list (list inside it).
  • Next we store an element selector $('.menu li a.parent'); in variable menux .
  • Then we added div with class .more just before menux element (i.e. a element holding a child list).
  • $('.more').click(function(){...}) toggles the .open class with itself when user clicks on it.
  • Finally $('.menu-btn').click(function(){...}) is used to toggle full navigation menu on smaller screens.
Added toggle buttons and functionality using jQuery
Added toggle buttons and functionality using jQuery

Just one more line to CSS: In final step add the following highlighted line to nav rule set. This line will allow toggle menu to hide by default on smaller screens.

/*...*/
nav{
 max-height: 50px;
 transition: max-height 0.3s;
 overflow: hidden;
}
/*...*/

Here is the working demo:

See the Pen Multi Level toggle navigation responsive by nikhil (@nikhil) on CodePen.


We hope you enjoyed this tutorial thank you for reading, if you have any questions please comment below.