Fancy Sidebar Navigation Plugin With jQuery And GSAP - sideNavi

Fancy Sidebar Navigation Plugin With jQuery And GSAP - sideNavi
File Size: 20.8 KB
Views Total: 4590
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

sideNavi is a fancy jQuery sidebar navigation plugin used to generate left and/or right side navigation which can be used in your one page scrolling website and single page web app. The plugin uses GSAP's TweenMax and CSS3 transitions for the smooth animations.

See also:

How to use it:

1. Load the necessary jQuery library and TweenMax.js in the html document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/TweenMax.min.js"></script>

2. Load the jQuery sideNavi plugin's files in the document. Note that the core JavaScript file must be loaded after jQuery library.

<link rel="stylesheet" href="sideNavi.css">
<script src="SideNav.js"></script>

3. Create a placeholder element for the sidebar navigation.

<section class="km-side-navi" id="demo"></section>

4. Create a new instance of the SideNavi and done.

var SideNav = new SideNavi();

5. All default options which can be passed as a JS object to the SideNavi() method.

var SideNav = new SideNavi({

    // custom text
    menu : ['part1','part2','part3','part4'],

    // bg color
    themeColor : '#dc1e24',

    // text color
    txtColor : '#fff',

    // or 'left'
    position : 'right'

Change log:


  • Added afterInit function
  • Compatible with fullpage.js.

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