Author: | osrec |
---|---|
Views Total: | 3,164 views |
Official Page: | Go to website |
Last Update: | August 12, 2018 |
License: | GPL-3.0 |
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()