Smooth Performant Sliding Drawer Navigation For Web App – SuperSlide.js

Category: Javascript , Menu & Navigation , Recommended | August 12, 2018
Author: osrec
Views Total: 84
Official Page: Go to website
Last Update: August 12, 2018
License: GPL-3.0

Preview:

Smooth Performant Sliding Drawer Navigation For Web App – SuperSlide.js

Description:

SuperSlide.js is a lightweight, customizable, high-performance sliding drawer (off-canvas) navigation designed for modern web applications.

More features:

  • 4 slide directions: top, right, left, bottom
  • Allows to toggle the navigation with drag and touch events.
  • Pushes the main content when the navigation is activated.
  • Supports promises.
  • Useful API and events.

Basic usage:

Install the SuperSlide.js with NPM.

npm install superslide.js

Import the SuperSlide.js library.

<script src='/path/to/superslide.js'></script>

Code the HTML for the drawer navigation.

<div id='menuContainer'>
  <button onclick='superslideMenu.close()'>Close</button>
  <!-- Menu Items Here -->
</div>

Insert a menu toggle link into the main content.

<div id='myContent'>
  <button onclick='superslideMenu.toggle()'>Toggle</button>
  <!-- Main content here -->
</div>

Initialize & activate the drawer navigation.

window.onload = function(){

  myNav = new OSREC.superslide({
    slider: document.getElementById('menuContainer'),
    content: document.getElementById('myContent')'
  });

  var openPromise = myNav.open();
  console.log(openPromise);

};

Options and defaults:

myNav = new OSREC.superslide({

  // slideLeft, slideRight, slideTop, slideBottom
  animation: 'slideLeft',

  // duration of animation
  duration: 0.5,

  // enable drag/touch events
  allowDrag: true,

  // slide the content when the drawer navigation is toggled
  slideContent: true,

  // allows content interactions
  allowContentInteraction: false,

  // close on blur
  closeOnBlur: false,

  // width/height of the drawer navigation
  width: '70vw',
  height: '100px',

  // thresholds
  dragThreshold: 70,
  openThreshold: 70,
  closeThreshold: 20
  
});

Callback functions available.

myNav = new OSREC.superslide({

  beforeOpen : function () {};
  onOpen : function () {};
  beforeClose : function () {};
  onClose : function () {};

});

API methods.

// open the navigation
myNav.open()

// close the navigation
myNav.close()

// toggle the navigation
myNav.toggle()

// check if is open
myNav.isOpen()

// check if is fully initialised
myNav.ready()

// destroy the navigation
myNav.destroy()

Leave a Reply