🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A responsive, adaptive, SEO-friendly, drop-down navigation plugin that collapses the horizontal menu items to an off-canvas side menu when a specified breakpoint is reached.

off-canvas-menu Drop-Down-Menu responsive-menu

Documentation

Responsive Side Mobile Menu jQuery Plugin

Quick Start

HTML

Prepare HTML structure as below (with or without submenu).

<nav class="your-class"> 	<ul> 		<li> 			<a href="#">Item 1</a> 		</li> 		<li> 			<a href="#">Item 2</a> 			<ul> 				<li> 					<a href="#">Subitem 1</a> 				</li> 				<li> 					<a href="#">Subitem 2</a> 				</li> 				<li> 					<a href="#">Subitem 3</a> 				</li> 			</ul> 		</li> 		<li> 			<a href="#">Item 3</a> 		</li> 	</ul> </nav> 

CSS

Include style.css into a page head.

<link rel="stylesheet" href="style.css"> 

Javascript

Include jQuery before first. Then include script.js after it.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>  <script src="script.js"></script> 

Initialization

Initialize the plugin as below.

$(document).ready(function() { 	$('.your-class').rsmm({ 		'position' : 'fixedOnScroll', // Should your menu be fixed? Don't include this option if it is not. 		'mobile' : 768 // Switch to mobile view breakpoint 	}); }); 

You May Also Like