Mobile Menu

Menu with sub-menu accordion on click

by Ronel Meyer

HTML

<div id="header-mobile-menu">

<ul id=”header-mobile-menu-block” class="mobile-menu">

<li id="menu-item-97" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-97"><a href="#">Home</a></li>

<li id="menu-item-100" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-100 menu-item-has-children">
    <a href="#">Parent Menu 1</a>
<ul class="sub-menu">

<li id="menu-item-29" class="menu-item-29"><a href="#">Item 1.1</a></li>

</ul>
</li>

<li id="menu-item-101" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-101 menu-item-has-children">
<a href="#">Parent Menu 2</a>
<ul class="sub-menu">

<li id="menu-item-9" class="menu-item-9"><a href="#">Item 2.1</a></li>

<li id="menu-item-8" class="menu-item-8"><a href="#">Item 2.2</a></li>

</ul>
</li>

<li id="menu-item-102" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-102 menu-item-has-children">
<a href="#">Parent Menu 3</a>
<ul class="sub-menu">

<li id="menu-item-11" class="menu-item-11"><a href="#">Item 3.1</a></li>

</ul>
</li>

<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="#">About</a></li>

</ul>
</div>

CSS

.mobile-menu {
	position: fixed; 
	left: 0; 
	top: 40px;
	padding: 5%; 
	background: #fff; 
	width: 90%; 
	visibility: visible; 
	opacity: 1; 
	overflow-x: scroll;
	display: block; 
	z-index: 9999;
	border-top: 3px solid #7c9b30; 
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
	bottom: 0;
}

.mobile-menu li a { 
	font-size: 14px; 
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 
	border-bottom: 1px solid #f8f8f8;
	color: #666;
	padding: 10px 5%;
	width: 90%; 
	display: block;
    text-decoration:none;
}

.mobile-menu li a:hover { 
	color: #111; 
	background-color: #f8f8f8; 
	text-decoration: none; 
}
.mobile-menu li ul {
    display: none;
    padding-left: 10px;
    visibility: visible;
}
.mobile-menu li li { 
	padding-left: 5%;
}

JavaScript

jQuery(document).ready(function() {

jQuery("li.menu-item-has-children > a").click(function(event){
				
	event.preventDefault();
    
	if(jQuery(this).parent().hasClass("open")){
		jQuery(this).next("ul").slideUp(500);
		jQuery(this).parent().removeClass("open");
	} else {
		jQuery(this).next("ul").slideDown(500);
		jQuery(this).parent().addClass("open");
	}
    
});
    
});