Javascript Responsive Menu

A very simple multilevel navigation menu.

Source

• Unlimited nested submenus
• Uses HTML list for markup
• Only 3.7kb minified. No dependencies.

How to use it

Add the script and css references:

<script src="menu.min.js"></script>
<link rel="stylesheet" href="menu.min.css" />

Create the structure with lists. They can be nested to create submenus:

<div class="menu">
	<ul id="menu1">
		<li><span class="menuItem"><a href="http://google.com">Google</a></span></li>
		<li>
			<span class="menuItem">Submenu</span>
			<ul >
				<li><span class="menuItem">Foo</span></li>
				<li>
					<span class="menuItem">Nested submenu</span>
					<ul>
						<li><span class="menuItem">Another option</span></li>
						<li><span class="menuItem">Another option 2</span></li>
						<li><span class="menuItem">Another option 3</span></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

Then initialize it:

var menu = new S.menu("menu1");

To change the appearance override this styles:

.menu {
	background-color: #4b4f55;
	color: #fff;
	border-radius: 5px;
	margin: 20px;
}
.menu .submenu {
	background-color: #4b4f55;
}
.menu .menuItem {
	padding: 7px 20px;
}
.menu a,
.menu a:visited {
	color: #fff;
	text-decoration: none;
}
.menu .hamburgerPanel {
  	padding: 10px 10px 10px 32px;
}
.menu.responsive .submenu {
	background-color: #6e757f;
}
.menu.responsive .submenu .submenu {
	background-color: #8E9296;
}