npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

superslide.js

v1.0.0

Published

A lightweight, slick sliding menu for your next PWA by OSREC Technologies (https://osrec.co.uk)

Downloads

39

Readme

SuperSlide.js

A lightweight, configurable sliding menu for your next PWA with promises. Only 2k gzipped!

This library aims to provide a highly configurable, ready-to-use sliding menu for your next web application, while delivering native-like animation performance. It was created by the OSREC Technologies while developing Bx, our invoicing, time-tracking and project management PWA.

Usage

Reference the library in a script tag

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

Add basic HTML markup

<body>
  <div id='content'>Content</div>
  <div id='menu'>Menu</div>
</body>

Add styles (so we can see what's going on!)

<style>
  body     { padding: 0px; margin: 0px; }
  #menu    { background: #ccc; }
  #content { min-height: 100vh; min-width: 100vw; }
</style>

Initialise the menu

var myMenu = new OSREC.superslide
({
    slider: document.getElementById('menu'),
    content: document.getElementById('content'),
    animation: 'slideLeft'
});

// Promise resolves once menu is open
var openPromise = myMenu.open();

Try the demo here

Animations

Standard Version has 4 animation options available:

slideLeft

slideRight

slideBottom

slideTop

PRO version :star: contains many more menu animations (check it out @ https://osrec.co.uk/products/superslidejs)

Parameters

  • animation (string): Any of the animations in the animation library (slideLeft, slideRight, slideTop, slideBottom).

  • duration (integer): Duration in seconds for the slide animation

  • allowDrag (boolean): Allow the menu to be dragged into the open or closed position via touch events.

  • slideContent (boolean): Slide the content along with the menu

  • allowContentInteraction (boolean): Allow the content to be clicked or scrolled while the menu is open

  • closeOnBlur (boolean): Close the menu when the user clicks or taps anywhere outside the menu

  • width (string): The width of the menu (for menus that sit along a vertical edge). Examples: '60vw' or '300px' or '80%'

  • height (string): The height of the menu (for menus that sit along a horizontal edge). Examples: '50vh' or '300px' or '80%'

  • dragThreshold (integer): The number of pixels from the edge from where a user can begin dragging; example: 70. Use with the allowDrag option.

  • openThreshold (integer): When the menu is in the open position, the number of pixels it must be dragged before it opens automatically; example: 30. Use with the allowDrag option.

  • closeThreshold (integer): When the menu is in the closed position, the number of pixels it must be dragged before it closes automatically; example: 20. Use with the allowDrag option.

  • beforeOpen (callback): Executed before the menu begins to open

  • onOpen (callback): Executed straight after the menu has opened

  • beforeClose (callback): Executed before the menu begins to close

  • onClose (callback): Executed as soon as the menu has closed

Methods

  • OSREC.superslide.open() Open the menu. Returns a promise that resolves once the menu opens (i.e. animation completes).

  • OSREC.superslide.close() Close the menu. Returns a promise that resolves once the menu closes (i.e. animation completes).

  • OSREC.superslide.toggle() Toggles the menu. Returns a promise that resolves once the menu has been toggled (i.e. animation completes).

  • OSREC.superslide.isOpen() True if the menu is open, false if closed. The last state if mid-drag. Returns a boolean.

  • OSREC.superslide.ready() Check if the menu is fully initialised. Returns a promise that resolves when fully initialised.

  • OSREC.superslide.destroy() Destroy the menu. This will close the menu if it is open before destroying. Returns null

Credits

Created by the Bx team at OSREC Technologies.

Bx

The library was developed as part of our business and project management app called Bx (you can check it out here).