Author: | mkg0 |
---|---|
Views Total: | 978 views |
Official Page: | Go to website |
Last Update: | August 16, 2018 |
License: | MIT |
Preview:

Description:
mkgSideBar is a native JavaScript library that helps you create dynamic, flexible, mobile-friendly, smooth off-screen sidebar navigation/panels for your cross-platform web project. Supports unlimited menu levels.
Basic usage:
Installation:
# NPM $ npm install mkg-sidebar --save
Add references to the mkgSideBar.js
and mkgSideBar.css
into your html page.
<script src="dist/mkgSideBar.js"></script> <link rel="stylesheet" href="dist/mkgSideBar.css">
Create the sidebar site navigation.
<div id="menu"> ... </div>
Add your nested menu items as a JavaScript array into the navigation.
var items = [ { text:'Menu 1', link:'#' }, { text:'Menu 2', link:'#', items:[ { text:'Menu 2-1', link:'#', items:[ { text:'Menu 2-1-1', link:'#' } ] }, { text:'Menu 2-2', link:'#' } ] }, { text:'Menu 3', link:'#', follow:false // no-follow } ]
Active the sidebar navigation that will slide out from the left side of the screen.
new mkgSideBar('menu',items,{position:'left'})
Open the sidebar navigation manually.
mkgSideBar.menu.open();
Default configuration options.
new mkgSideBar('menu',items,{ baseURL: '', position: 'left', // left, top, bottom, right closeButton: true, closeOnBackgroundClick: true, animationType: 'slide', defaultTitle:'' //default title attr value defaultFollow:true, // default follow attr value autoCollapse:false onOpen: null, // callback onClose: null // callback })
API methods:
menu.collapse(); //collapse all submenus menu.unCollapse(); //uncollapse all submenus menu.open(); //open menu menu.close(); //close menu menu.toggle(); //toggle menu menu.removeItems(); //clears all items menu.setContentFrom('#divWithContent'); //sets the menu content from targeted element menu.setHeaderFrom('#divWithContent'); //sets the menu header content from targeted element menu.setFooterFrom('#divWithContent'); //sets the menu footer content from targeted element menu.setContent('<div>test</div>'); //sets the menu content from targeted element menu.setHeader('<div>test</div>'); //sets the menu header content from targeted element menu.setFooter('<div>test</div>'); //sets the menu footer content from targeted element menu.refreshItems();
Changelog:
08/16/2018
- Restructure