Hamburger Drop-down with CSS and JavaScript for Multi-Level Menus – Part 2

Published

September 17, 2014

Category

Development

A few weeks ago we published a blog post how to create a SIMPLE HAMBURGER DROP-DOWN MENU WITH CSS AND JQUERY. There was a request to extend it for multi-level menus and so here we go:

There are several different methods to solve multi-level drop-down menus. The challenge is to develop it for touch devices as there is basically no hover function. After a short research we decided to split the functionality into two parts: The menu drop down based on the click on the hamburger and a second toggle function for the multi-level sections.

This means we have the hamburger as a trigger to show the parent menu, and for each parent with children we have an open – close trigger. In the following tutorial you find the required JavaScript as well es the HTML Code-Structure and the CSS.

HTML Structure

If you are using WordPress you don’t have to care about the rendering of the list elements. Just register a new menu or use the existing one and render the list with the wp_nav_menu() function.

<div class="mobile-nav">
     <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
     </div>

     <div class="responsive-menu">
          <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'first' ) ); ?>
     </div>
</div>

If you are using a different systems or a custom HTML site, your list should look like this:

<div class="responsive-menu">
	<ul>
		<li>
			<a href="#link">Parent 1</a>
		</li>
		<li class="menu-item-has-children">
			<a href="#link">Parent 2</a>
			<ul class="sub-menu">
				<li>
					<a href="#link">Child 1</a>
				</li>
				<li>
					<a href="#link">Child 2</a>
				</li>
				<li>
					<a href="#link">Child 3</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#link">Parent 3</a>
		</li>
	</ul>
</div>

JQuery

We have add two functions, one to show/hide the menu itself when there is a click on the hamburger and one for the open/close function for menu-links with children.

<script type="text/javascript">
	jQuery(function($){
    	     $( '.menu-btn' ).click(function(){
    	     $('.responsive-menu').toggleClass('expand')
    	     })
        })
</script>

The second script is adding a +/- to the elements that have children first and than adds the class “visible” to toggle.

<script>
	jQuery(document).ready(function($){
	    $(".menu-item-has-children").append("<div class='open-menu-link open'>+</div>");
	    $('.menu-item-has-children').append("<div class='open-menu-link close'>-</div>");
	
	    $('.open').addClass('visible');
	
	    $('.open-menu-link').click(function(e){
	        var childMenu =  e.currentTarget.parentNode.children[1];
	        if($(childMenu).hasClass('visible')){
	            $(childMenu).removeClass("visible");
	
	            $(e.currentTarget.parentNode.children[3]).removeClass("visible");
	            $(e.currentTarget.parentNode.children[2]).addClass("visible");
	        } else {
	            $(childMenu).addClass("visible");
	
	            $(e.currentTarget.parentNode.children[2]).removeClass("visible");
	            $(e.currentTarget.parentNode.children[3]).addClass("visible");
	        }
	    });
	});
</script>

CSS

Beside the styling of your menu you have to adjust the position of your toggles of the parent elements with children. Be sure you have added the classes “visible” and “expand” to your CSS file as they are the control classes added by the JavaScript.

.menu-btn div {
	position: absolute;
	left: 100%;
	top: 64%;
	padding-right: 8px;
	margin-top: -0.50em;
	line-height: 1.2;
	font-size: 18px;
	font-weight: 200;
	vertical-align: middle;
	z-index: 99;
}

.menu-btn span {
	display: block;
	width: 19px;
	height: 3px;
	margin: 4px 0;
	background: rgb(0,0,0);
	z-index: 99;
}

.responsive-menu{
	display: none;
}

.expand {
	display: block !important; 
}

.open-menu-link{
	display: none;
	position: absolute;
	right: 15px;
	top:0;
	line-height: 55px;
	font-size: 30px;
	cursor: pointer;
}

li .sub-menu{
	display: none;
}

.visible {
	display: block !important;
}

You find an example of the multi-level Hamburger menu in the mobile view here:
http://www.austrianstartups.com

INTERNETKULTUR | © 2018 | Imprint