Create Mobile-First Side Menus with SlideReveal.js Library

SlideReveal.js is a simple, lightweight off-canvas menu JavaScript library that helps you create push menus, overlay side navigation, sidebar drawers in modern web applications.

Features:

• Left or right panel positioning with configurable width units (px, %, vw, rem, em)
• Overlay effects with customizable colors and opacity levels
• Or push the main content to the other side instead of overlaying
• Blur the main content when panels open
• Keyboard accessibility with ARIA support
• Click outside to dismiss the panels
• Callback system for initialization, open, close, and escape events

How to use it:

1. Install slidereveal-js and import it into your project.

# NPM
$ npm install slidereveal-js

import SlideReveal from 'slidereveal-js';

2. Or directly load the ‘slidereveal.min.js’ script in your HTML document.

<script src="slidereveal.min.js"></script>

3. Create the panel element.

<div id="panel">
  Place anything here
</div>

4. Create a toggle element to reveal/dismiss the panel.

<button class="toggle-button">Open Menu</button>

5. Create a new instance of SlideReveal and pass your panel’s selector. That’s it.

const menu = new SlideReveal('#panel', {
  trigger: '.toggle-button',
});

6. All possible options.

• width (Number/String): Panel width – supports px, %, vw, rem, em units (default: 300)
• position (String): ‘left’ or ‘right’ positioning (default: ‘right’)
• selector (String): CSS selector for content container (default: ‘body’)
• zIndex (Number): Z-index for panel layering (default: 1050)
• pushBody (Boolean): Moves content instead of overlaying (default: false)
• overlay (Boolean): Shows background overlay (default: true)
• overlayColor (String): CSS color value for overlay (default: ‘rgba(0,0,0,0.3)’)
• filter (Boolean): Applies CSS filter to content (default: false)
• filterStyle (String): CSS filter value like ‘blur(2px)’ (default: ‘blur(2px)’)
• trigger (String/HTMLElement): Selector or element for toggle button (default: null)
• closeOnOutsideClick (Boolean): Closes on external clicks (default: false)
• autoEscape (Boolean): Enables Escape key closing (default: true)
• speed (Number): Animation duration in milliseconds (default: 400)
• ariaLabel (String): ARIA label for screen readers (default: ‘Menu’)

const menu = new SlideReveal('#panel', {
  width: 300,
  position: 'right',
  filter: false,
  filterStyle: 'blur(2px)',
  overlay: true,
  overlayColor: 'rgba(0,0,0,0.3)',
  closeOnOutsideClick: false,
  speed: 400,
  pushBody: false,
  selector: 'body',
  trigger: null,
  autoEscape: true,
  zIndex: 1050,
  classNames: {},
  ariaLabel: 'Menu',
});

7. Callback functions.

const menu = new SlideReveal('#panel', {
  onInit: () => console.log('Initialized!'),
  onOpen: () => console.log('Panel opened!'),
  onClose: () => console.log('Panel closed!'),
  onEscape: () => console.log('Closed by Escape')
});

8. API methods.

// Open the panel
slidePanel.open();     

// Close the panel
slidePanel.close();    

// Toggle open/closed state
slidePanel.toggle();   

// Remove all event listeners and DOM changes
slidePanel.destroy();

The post Create Mobile-First Side Menus with SlideReveal.js Library appeared first on CSS Script.