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

Preview:

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()