Sidr

global.js

	// Mobile Menu
	$('.mobile-menu-toggle').sidr({
		name: 'sidr-mobile-menu',
		source: '.nav-primary',
		side: 'right',
	});
	$('.sidr-class-menu-item-has-children').prepend('<span class="submenu-toggle">' );
	$('.sidr-class-menu-item-has-children.sidr-class-current-menu-item').addClass('submenu-active');
	$('.sidr-class-menu-item-has-children > .submenu-toggle').click(function(e){
		$(this).parent().toggleClass('submenu-active');
		e.preventDefault();
	});
	$('.sidr a').click(function(){
		$.sidr('close', 'sidr-mobile-menu');
	});
	$(document).mouseup(function (e){
		var container = $("#sidr-mobile-menu");
		if (!container.is(e.target) && container.has(e.target).length === 0) { 
			$.sidr('close', 'sidr-mobile-menu'); 
		}
	});

style.css

/* Mobile Menu
--------------------------------------------- */
 
.sidr {
	background: #2E1E12;
	display:block;
	position:fixed;
	top:0;
	height:100%;
	z-index:999999;
	width:345px;
	overflow-x:hidden;
	overflow-y:auto;
}

.sidr.right {
	left:auto;
	padding-left: 2px;
	right:-345px;
}

.sidr.left {
	left:-345px;
	padding-right: 2px;
	right:auto;
}

.sidr a {
	background: #62483B;
	color: #fff;
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 28px;
	margin-bottom: 2px;
	padding: 10px 10px 10px 20px;
	text-decoration: none;
	text-transform: uppercase;
}

.sidr li.sidr-class-menu-item-has-children {
	position: relative;
} 

.sidr li.sidr-class-menu-item-has-children > .submenu-toggle {
	background: #73584B;
	cursor: pointer;
	width: 48px;
	height: 48px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 99;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition:    all 0.1s ease-in-out;
	-ms-transition:     all 0.1s ease-in-out;
	-o-transition:      all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;
}

.sidr li.sidr-class-menu-item-has-children > .submenu-toggle:hover,
.sidr li.sidr-class-menu-item-has-children.submenu-active > .submenu-toggle {
	background: #7F635E;
}

.sidr li.sidr-class-menu-item-has-children > .submenu-toggle:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -4px 0 0 -4px;
	
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 8px;
	border-color: transparent transparent transparent #ffffff;
}

.sidr ul li ul {
  display: none;
}
 
.sidr ul li.submenu-active > ul {
	display: block;
}
 
.sidr ul li.submenu-active > .submenu-toggle:before,
.sidr ul li.sidr-class-current-menu-item > .submenu-toggle:before {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
 
.sidr ul li ul li a {
	background: #7F635E;
	padding-left: 40px;
}

.sidr-open.admin-bar #wpadminbar {
	position: fixed;
}