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="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.navside.js"></script>

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

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></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>
  </ul>
</nav>

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.

$("#navside").navside();

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.

$("#navside").navside({

  // '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.