Responsive multi menu

The easiest way to develop site with multi level navigation and user-friendly experience it has been optimized for mobile devices using HTML5, CSS3 and jQuery

Main features of multi level menu


Easy installation

Include 3 lines of code to your HTML and let navigation works

Multi level on CSS

Multi level menu for wide screens will work even if no js

Light-weight

Requires only jquery

Multiple menus

You can have responsive multi menu as many as you want on your site

Works in mobiles

Responsive Multi Menu fits to your screen which works on mobile phones

Free licensed under MIT

Do with code what you want

Mobile menu display




Step 1 - Include HTML code to <head></head>

<!-- Include scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="js/responsivemultimenu.js"></script>

<!-- Include styles -->
<link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/>

<!-- Include media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
									
									

Step 2 - Include HTML code to <body></body>

<div class="rmm style">
	<ul>
		<li>
			<a href="#">Books</a>
			<ul>
				<li>
					<a href="#">Audiobooks</a>
				</li>
				<li>
					<a href="#">Cookbooks</a>
				</li>
				<li>
					<a href="#">Catalogs</a>
				</li>
				<li>
					<a href="#">Other</a>
					<ul>
						<li><a href="#">Other 1</a></li>
						<li><a href="#">Other 2</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Dvds</a>
		</li>
		<li>
			<a href="#">Music</a>
			<ul>
				<li><a href="#">Cassettes</a></li>
				<li><a href="#">CD</a></li>
				<li><a href="#">Records</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Video games</a>
		</li>
	</ul>
</div>


Example of mobile navigation in full HTML code

<!DOCTYPE html>
<html>
<head>
	<title>Responsive Multi Menu</title>

	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">

	<!-- Include scripts -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
	<script type="text/javascript" src="js/responsivemultimenu.js"></script>

	<!-- Include styles -->
	<link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/>

	<!-- Include media queries -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<body style="background: #2C2B2C;">
	<div>
		<div class="rmm style">
			<ul>
				<li>
					<a href="Books.html">Books</a>
					<ul>
						<li>
							<a href="Audiobooks.html">Audiobooks</a>
						</li>
						<li>
							<a href="Cookbooks.html">Cookbooks</a>
						</li>
						<li>
							<a href="Catalogs.html">Catalogs</a>
						</li>
						<li>
							<a href="Other.html">Other</a>
							<ul>
								<li><a href="Other.html">Other 1</a></li>
								<li><a href="Other.html">Other 2</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a href="Dvds.html">Dvds</a>
				</li>
				<li>
					<a href="Music.html">Music</a>
					<ul>
						<li><a href="Cassettes.html">Cassettes</a></li>
						<li><a href="CD.html">CD</a></li>
						<li><a href="Records.html">Records</a></li>
					</ul>
				</li>
				<li>
					<a href="Videogames.html">Video games</a>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

To do


Debugging and optimization fixes

It would be nice to implement animation effects

More menu styles

Navigation is customizable but there is only one style available

Plugin for Once Builder CMS

Create menu plugin for well known content management systems

Comments