Fancy Sidebar Navigation Plugin With jQuery And GSAP - sideNavi

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:

• jQuery Plugin For Scroll Position Indicator - Progress Tracker
• jQuery Plugin For Auto One Page Scroll Navigation - Section Scroll
• Custom Image Navigation For One Page Scroll Website - Vertical Navigation
• Minimal One Page Navigator Plugin With jQuery - scrollMiniMenu
• jQuery Plugin For Smooth Vertical Scrolling Navigation

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:

2016-12-07

• 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.