Author: | hamittokay |
---|---|
Views Total: | 1,087 views |
Official Page: | Go to website |
Last Update: | August 13, 2018 |
License: | MIT |
Preview:

Description:
Hipsbar.js is a native JavaScript library to dynamically generate a sliding drawer (off-canvas) navigation on your web app.
The Hipsbar makes it easier to create mobile app navigation sliding from top/right/bottom/left of the screen when toggled.
Also provides a blur effect on the main content when the drawer navigation is activated.
How to use it:
Import the Hipsbar’s JavaScript and Stylesheet into the page.
<link rel="stylesheet" href="./dist/Hipsbar.css"> <script src="./dist/Hipsbar.js"></script>
Prepare your navigation data (menu name & URL) in the JavaScript.
const myData = [ { content: 'HOME', url: '#' }, { content: 'CSS', url: '#' }, { content: 'SCRIPT', url: '#' }, { content: 'COM', url: '#' }, { content: 'CONTACT', url: '#' }, { content: 'ABOUT', url: '#' }, ]
Multi-level menu items are supported as well.
const myData = [ { content: 'JavaScript', children: [{ content: 'Frameworks', url: '#', children: [ content: 'VUE', url: 'https://www.vuejs.org' ]}, ... ]} ]
Create a trigger element to toggle the drawer navigation.
<a href="#" id="trigger">Launch</a>
Initialize the Hipsbar to enable the drawer navigation that will slide out from the left side of the webpage.
new Hipsbar({ activator: '#trigger', myData })
Customize the position of the drawer navigation. Available values:
- Top
- Left (Default)
- Right
- Bottom
new Hipsbar({ activator: '#trigger', data: myData, position: 'right' })
Determine whether or not blur the main content when the drawer navigation is activated.
new Hipsbar({ activator: '#trigger', data: myData, position: 'right', overlay: true, blur: true })
Set the width of the drawer navigation is activated.
new Hipsbar({ activator: '#trigger', data: myData, width: 300 })
Load data from an external file:
new Hipsbar({ dataURL: 'data.json' })
Changelog:
08/13/2018
- added feature child items. added feature loading via ajax.
08/10/2018
- Added more options
I did everything as explained, it doesn’t work at all. It was a good idea though.