| Author: | technoquill |
|---|---|
| Views Total: | 0 views |
| Official Page: | Go to website |
| Last Update: | June 26, 2025 |
| License: | MIT |
Preview:
Description:
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.
3. Create the panel element.
Place anything here
4. Create a toggle element to reveal/dismiss the panel.
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();
