Smooth Sidebar Navigation Plugin with jQuery - NavSide

File Size: 8.96 KB
Views Total: 9917
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smooth Sidebar Navigation Plugin with jQuery - NavSide

NavSide is a super lightweight jQuery sidebar navigation plugin which helps you implement a mobile app style off-canvas menu with smooth slideIn / slideOut effects on your webpage.

How to use it:

1. Include jQuery library and the jQuery NavSide plugin's JavaScript & CSS files on the webpage.

<link href="css/navside.css" rel="stylesheet">
<script src="//"></script>
<script src="js/jquery.navside.js"></script>

2. In addition, you need to include the jQuery easing plugin after jQuery library.

<script src="//"></script>

3. Create a sidebar navigation for your website.

<nav id="navside">
  <ul id="sidebar-menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>

4. Initialize the plugin as follow. The plugin will automatically generate a menu toggle icon inside the document. Click on the toggle icon you will see an off-canvas menu sliding out from the right side of the screen.


5. Apply your own styles to the sidebar navigation.

#sidebar-menu {
  top: 0px;
  width: 100%;

#sidebar-menu li { border-bottom: 1px solid rgba(238, 238, 238, 0.05); }

#sidebar-menu a {
  text-decoration: none;
  color: #595959;

#sidebar-menu a:hover {
  text-decoration: none;
  color: #595959;

6. Default settings.


  // 'right' or 'left'
  position         : 'right',

  // 'hidden' or 'fixed'
  scroll           : 'hidden'

This awesome jQuery plugin is developed by recortex. For more Advanced Usages, please check the demo page or visit the official website.