Mobile Menu

Menu with sub-menu accordion on click

HTML

<div id="header-right" class="header-sidebar widget-area">
    
    <div class="menu-header-container">
        <ul class="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">
                <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">
                <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">
                <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>
        
    <div id="header-mobile-menu">
        <a href="#" class="mobile-nav closed"><span class="mobile-menu-bar"></span>Button</a>
    </div>
</div>

CSS

#header-mobile-menu { 
	float: right; 
	display: block; 
}

.menu-header-container{ 
	float: right; 
	display: none; 
}

.mobile-menu-bar {
	color: #757575;
    display: block;
    height: 20px;
    width: 31px;
	text-align: center;
}
.mobile-menu-bar:hover {
	color: #7c9b30;
}


.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() {

    mobile_menu( jQuery('#header-right ul.menu'), jQuery('#header-mobile-menu .mobile-nav'), 'header-mobile-menu-block', 'mobile-menu' );
    
	function mobile_menu( menu, append_to, menu_id, menu_class ){
		var jQuerycloned_nav;

		menu.clone().attr('id',menu_id).removeClass().attr('class',menu_class).appendTo( append_to );
		jQuerycloned_nav = append_to.find('> ul');
        jQuerycloned_nav.find('.menu_slide').remove();
		jQuerycloned_nav.find('li:first').addClass('menu-mobile-first-item');

        jQuery("#header-mobile-menu-block li:has(> ul)").each(function(){
				jQuery(this).attr('class','menu-item-has-children');
			});
        
        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");
            }
        });
        
        append_to.click( function(){
			if ( jQuery(this).hasClass('closed') ){
				jQuery(this).removeClass( 'closed' ).addClass( 'opened' );
				jQuerycloned_nav.slideDown( 500 );
			} else {
				jQuery(this).removeClass( 'opened' ).addClass( 'closed' );
				jQuerycloned_nav.slideUp( 500 );
			}
			return false;
		} );
   
    
        append_to.find('a').click( function(event){
				event.stopPropagation();
		} );
    }
});