Simple Flexible Off-canvas Side Navigation With Pure JavaScript – mkgSideBar

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