AnimatedSideNav

A Nice and Animated Side Navigation Bar Built by jQuery&TweenMax(GSAP)

See OnlineDemo

How to use

Fisrt of all,please include jQuery and TweenMax before SideNav,and don't forget css:

<link rel="stylesheet" href="/dest/scss/sideNavi.css">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/gsap/src/minified/TweenMax.min.js"></script>
<script src="/dest/js/SideNav.js"></script>

Then HTML:

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

Finally use Javascript:

var options = {
    //default : ['part1','part2','part3','part4']
    menu : ['item1','item2','item3','item4','item5'],
    //default : 'right'
    position : 'left', //you can set 'left' or 'right'
    //default : '#dc1e24'
    themeColor : '#1ed1dc', //it will change the name background-color and semicircle's background-color
    //default : '#fff'
    txtColor: '#ffffff', //it will change the menu item text's color
    id : 'exampleSide', //the DOM you want to genorate
    afterInit : function(){ //this function will execute after all the sidenav's animation is done
        alert('afterInit')
    }
}
var SideNav = new SideNavi(options);

Methods

Will Update Soon