mkg-sidebar is stylable navigation bar/pane/drawer with nested menu support for mobile and web UI. You can easily set up navigation items or custom html content. then u just need trigger to open.
Install
From Node
npm install mkg-sidebar --save
import mSidebar from "mkg-sidebar";
import "mkg-sidebar/dist/mkg-sidebar.css";
From Browser
you can get the latest release of mkg-sidebar from repo
import script and css files
<script src="mkg-sidebar.min.js"></script>
<link rel="stylesheet" type="text/css" href="mkg-sidebar.min.css">
Usage
var items = [
{
text:'Main Page',
link:'Link1'
},
{
text:'Another Page',
link:'AnotherLink'
}
];
var menu = mSidebar({baseURL: 'http://site.com/'});
menu.addItem(items);
menu.open();
Options with Default Values
baseURL:'' // base url to every relative menu links
position:'left' // left, top, bottom, right
closeButton:true //
closeOnBackgroundClick:true //
animationType:'slide' // TODO:push, spread
defaultTitle:'' //default title attr value
defaultFollow:true, // default follow attr value
autoCollapse:false// auto collapse on close
onOpen:null // handler
onClose:null // handler
Methods
var menu = mSidebar(options);
menu.addItem({
text:'Test',
link:'/PageLink.html',
callback:function(){console.log(this);}
});
menu.collapse();
menu.unCollapse();
menu.open();
menu.close();
menu.toggle();
menu.removeItems();
menu.setContentFrom('#divWithContent');
menu.setHeaderFrom('#divWithContent');
menu.setFooterFrom('#divWithContent');
menu.setContent('<div>test</div>');
menu.setHeader('<div>test</div>');
menu.setFooter('<div>test</div>');
menu.refreshItems();
Visualize
Scss styling
.mSidebar{
& &-item{}
& &-collapse{
& &-header{}
& &-items{}
& &-button{}
}
& &--d0{}
& &--d1{}
& &--d2{}
}
css styling
.mSidebar .mSidebar-item{}
.mSidebar .mSidebar-collapse {}
.mSidebar .mSidebar-collapse-header {}
.mSidebar .mSidebar-collapse-items {}
.mSidebar .mSidebar-collapse-button {}
.mSidebar-collapse-button.mSidebar--d0 {} //you can combine any class with mSidebar--d{level} class
.mSidebar-collapse-button.mSidebar--d1 {}
.mSidebar-collapse-button.mSidebar--d2 {}
Building
ensure that you have all dependency packes with 'npm install' and install gulp to gloval with npm install gulp -g
package using gulp for building. following tasks are avaliable:
gulp default
: watches src files and serves index.html for developinggulp minify
: creates minified version of package. don't forget to use it after development ends.
TO DO
- add React component
- add alternative animation styles
- optional animation libraries //'It based on native js and css. Animation libraries TweenMax, jQuery animate are also optional.'
- add alternative visual style
- documantation