Dynamic Sliding Drawer Navigation In Pure JavaScript – Hipsbar

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