5 Level responsive Menu. wordpress ready menu

Custom menu control open on left or Right

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">Online Store</a>
	</div>
	<div class="collapse navbar-collapse" id="myNavbar">
		<div class="menu-primarymenu-container">
		<!-- <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav navbar-nav top-m' ) ); ?>  // wordpress Menu Genrateor -->
			<ul id="menu-primarymenu" class="nav navbar-nav top-m">
				<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="">Shop</a>
				<ul class="sub-menu">
					<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="">Cart &#8211; Level 1</a></li>
					<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-20"><a href="">Checkout &#8211; Level 1</a>
					<ul class="sub-menu">
						<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="#">Home &#8211; Level 2</a></li>
						<li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-32"><a href="#">Contact &#8211; Level 2</a>
						<ul class="sub-menu">
							<li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-36"><a href="#">Pricing &#8211; Level 3</a></li>
							<li id="menu-item-37" class="menu-item...

CSS

#myNavbar .top-m li a{
	display: block;
}
#myNavbar .top-m > li > a:hover{
	background-color: #999;
	color: #FFF;
}
#myNavbar .top-m li ul{
	padding: 0;
	list-style: none;
}
#myNavbar .top-m li ul li{
	position: relative;
}
#myNavbar .top-m li ul li a{
	color: #FFF;
	padding: 8px 12px;
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
#myNavbar .top-m li ul li a:hover{
	background-color: rgba(0,0,0,0.2);
}
#myNavbar .top-m > li > ul{
	padding: 0;
}
#myNavbar .top-m > li > ul,
#myNavbar .top-m > li > ul > li > ul,
#myNavbar .top-m > li > ul > li > ul > li > ul,
#myNavbar .top-m > li > ul > li > ul > li > ul > li > ul{
	display: none;
}
#myNavbar .top-m > li ul {
	border-top: 1px solid rgba(0,0,0,0.1);
	position: absolute;
	background: #99F;
	z-index: 9999;
	width: 260px;
}
#myNavbar .top-m > li > ul {
	left: 0;
}
#myNavbar .top-m > li > ul > li > ul,
#myNavbar .top-m > li > ul > li > ul > li > ul,
#myNavbar .top-m > li > ul > li > ul > li > ul > li > ul {
	right: -260px;
	top: 0;
}
#myNavbar .top-m > li:hover > ul,
#myNavbar .top-m > li > ul > li:hover > ul,
#myNavbar .top-m > li > ul > li > ul > li:hover > ul,
#myNavbar .top-m > li > ul > li > ul > li > ul > li:hover > ul {
	display: block;
}
#myNavbar .top-m > li > ul.ool{ /* Open on Left (for 1st level only) */
	right: 0;
	left: auto;
}
#myNavbar .top-m > li > ul.oor{ /* Open on Right (for 1st level only) */
	left: 0;
	right: auto;
}
#myNavbar .top-m > li > ul.oor .sub-menu{ /* Open Sub-Menu on Right by Default */
	right: -260px;
}
#myNavbar .top-m > li > ul.ool .sub-menu{ /* Open Sub-Menu on Left by Default */
	left: -260px;
}
#myNavbar .top-m > li ul.eor{ /* Expand on Right (for all levels except 1st) */
	right: -260px;
}
#myNavbar .top-m > li ul.eol{ /* Expand on Left (for all levels except 1st) */
	left: -260px;
}
#myNavbar .top-m > li > ul.ool li{
	text-align: right;
}
#myNavbar .top-m li.hoverActive > a { /* Active Parent Li when child is hover */
	background-color:...

JavaScript

$(document).ready(function(){
	// $("#myNavbar .top-m > li:nth-child(1) > ul").addClass("oor");
	// $("#myNavbar .top-m > li:nth-child(1) > .ool .sub-menu").addClass("eor");

	// // $("#myNavbar .top-m > li:nth-child(1) > ul").addClass("mta-r");
	// $("#myNavbar .top-m > li:nth-child(1) > ul > li > ul").addClass("eol");

	// $("#myNavbar .top-m ul.eol").parent().parent().addClass("text-right");
	// $("#myNavbar .top-m ul.eor").parent().parent().addClass("text-left");


	$("#myNavbar .top-m > li:nth-child(6) > ul").addClass("ool");
	// $("#myNavbar .top-m > li:nth-child(6) > .oor .sub-menu").addClass("eol");

	// When hover on child, this makes parent active. (just for 1st level of menu)
	$(".sub-menu").hover(function(){
		$(this).parent().toggleClass("hoverActive");
	});

	$(".top-m li.menu-item-has-children").prepend('<span class="res-dropdown"></span>');
	$(".res-dropdown").click(function(){
		$(this).siblings('.sub-menu').slideToggle();
	})
});