Gathering detailed insights and metrics for slidereveal-js
Gathering detailed insights and metrics for slidereveal-js
A lightweight, flexible, and dependency-free JavaScript library for creating responsive side panels (drawers/slide menus).
1.0.0
MIT
JavaScript
62.23 kB
Installations
npm install slidereveal-jsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, ESM
Node Version
10.19.0
NPM Version
6.14.4
Languages
1
JavaScript
JavaScript (100%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
10 Commits
2 Branches
1 Contributors
Updated on Jul 06, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
slidereveal-js@1.0.0
Unpacked Size
62.23 kB
Size
14.75 kB
File Count
9
NPM Version
6.14.4
Node Version
10.19.0
Published on
Jul 06, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
SlideReveal.js - (JavaScript)
A lightweight, flexible, and dependency-free JavaScript library for creating responsive side panels (drawers/slide menus).
Disclaimer:
This library is not affiliated with the original jQuery SlideReveal (author: Natthawat Pongsri, MIT license).
SlideReveal.js is a modern, dependency-free, vanilla JS implementation with extended functionality for contemporary frontend projects.
Note for jQuery-based projects:
If your project already relies heavily on jQuery, you may prefer to use the original jQuery SlideReveal plugin for the best compatibility and integration.
This vanilla JS version is designed for dependency-free projects or for those migrating away from jQuery.
Special thanks to the original author:
Huge thanks to Natthawat Pongsri for the idea and the original jQuery implementation.
The motivation for this rewrite was the move away from jQuery and the need for a universal, lightweight solution.
Overview
SlideReveal.js is a lightweight, flexible, and dependency-free JavaScript class for creating responsive side panels (drawers/slide menus).
It supports overlays, push-body effects, filters, keyboard accessibility, and full customization through callbacks and options.
Browser support: Edge 12+, Chrome 45+, Firefox 44+, Safari 10+, IE — not supported
Features
- Left or right sliding panel (
position: 'left' | 'right') - Any width: px, %, vw, rem, em (
width: 320 | '80vw' | '70%' | ...) - Overlay with configurable color and opacity
- Push body effect (moves content) or overlays content
- Content filter (e.g., blur, grayscale) when open
- Close on the outside click (without an overlay)
- ARIA accessibility support
- Callbacks: onInit, onOpen, onClose, onEscape
- No external dependencies (no jQuery!)
Demo
Installation
1. Via NPM (recommended)
1npm install slidereveal-js
Then import in your code:
1import SlideReveal from 'slidereveal-js';
2. Manual Download
- Download
- Uncompressed
slidereveal.js - Minified
slidereveal.min.js
- Uncompressed
- Add to your project and include via
<script src="slidereveal.min.js"></script>if not using modules
Quick Start
1. Add HTML
1<button class="toggle-button">Open Menu</button> 2<div id="panel"> 3 <h2>My Menu</h2> 4 <ul> 5 <li>Item 1</li> 6 <li>Item 2</li> 7 </ul> 8</div>
2. Initialize SlideReveal
1const menu = new Slidereveal('#panel', { 2 position: 'right', 3 width: 320, // Supports '70vw', '80%', '300', etc. 4 pushBody: true, 5 overlay: true, 6 overlayColor: 'rgba(25,25,25,0.3)', 7 filter: true, 8 trigger: '.toggle-button', // CSS selector for open/close trigger 9 closeOnOutsideClick: true, 10 speed: 400, 11 ariaLabel: 'Side Menu', 12 onInit: () => console.log('Initialized!'), 13 onOpen: () => console.log('Panel opened!'), 14 onClose: () => console.log('Panel closed!'), 15 onEscape: () => console.log('Closed by Escape') 16});
⚠️ Important: About the selector Option
Warning: The behavior of the selector option in SlideReveal depends on your page layout.
- If you use a wrapper element selector (for example, #wrapper), only the content inside that container will be pushed or filtered.
- If you use body as the selector, SlideReveal will wrap all content inside (except the panel and overlay) into a wrapper to apply push/filter effects to the whole page.
Mixing different layouts and selectors may affect the appearance and behavior of your panel.
Examples
Case 1: Selector is a wrapper container
1<!-- selector: #wrapper --> 2<body> 3 <div id="wrapper"> 4 <header> 5 <button class="toggle-panel">Trigger</button> 6 </header> 7 <article> 8 Any content here! 9 </article> 10 </div> 11 <div id="panel"> 12 <h2>Menu</h2> 13 <ul> 14 <li>Item 1</li> 15 <li>Item 2</li> 16 </ul> 17 </div> 18 <script> 19 const menu = new SlideReveal('#panel', { 20 selector: '#wrapper' 21 }); 22 </script> 23</body> 24
Case 2: Selector is body
1<!-- selector: body --> 2<body> 3 <header> 4 <button class="toggle-panel">Trigger</button> 5 </header> 6 <article> 7 Body content here! 8 </article> 9 <div id="panel"> 10 <h2>Menu</h2> 11 <ul> 12 <li>Item 1</li> 13 <li>Item 2</li> 14 </ul> 15 </div> 16 <script> 17 const menu = new SlideReveal('#panel', { 18 selector: 'body' 19 }); 20 </script> 21</body>
Best Practice:
Match your selector option to the actual main container of your content.
If your content is already inside a container (like #wrapper), use that selector. If not, use 'body' (default), but be aware that SlideReveal will wrap all body content except the panel and overlay.
Options
| Option | Type | Description | Default |
|---|---|---|---|
width | Number/String | Panel width (px, %, vw, rem, etc.) | 300 |
position | String | 'left' or 'right' | 'right' |
pushBody | Boolean | Pushes body content instead of overlaying | false |
overlay | Boolean | Shows overlay under the panel | true |
overlayColor | String | Overlay color (CSS value) | 'rgba(0,0,0,0.3)' |
filter | Boolean | Applies CSS filter to page content (blur, etc) | false |
filterStyle | String | CSS filter value (e.g., 'blur(2px)') | 'blur(2px)' |
closeOnOutsideClick | Boolean | Closes panel when clicking outside (only if no overlay) | false |
selector | String | Selector for affected content (normally 'body') | 'body' |
trigger | String/HTMLElement | Selector or element for open/close trigger | null |
speed | Number | Animation duration in ms | 400 |
autoEscape | Boolean | Closes panel with Escape key | true |
zIndex | Number | zIndex for panel (default) and body (default - 1) | 1050 |
ariaLabel | String | ARIA label for accessibility | 'Menu' |
onInit | Function | Callback after panel initialization | null |
onOpen | Function | Callback after panel opens | null |
onClose | Function | Callback after panel closes | null |
onEscape | Function | Callback after closing by Escape | null |
API
| Method | Description |
|---|---|
open() | Open the panel |
close() | Close the panel |
toggle() | Toggle the panel open/closed |
destroy() | Remove all handlers and DOM changes |
SlideReveal HTML markup
1<html> 2 <body class='slidereveal-open'> 3 <!-- panel --> 4 <div class='slidereveal-panel'> 5 <div class='slidereveal-panel-content'> ... </div> 6 </div> 7 <!-- body (selector) content --> 8 <div class='slidereveal-body'> ... </div> 9 <!-- overlay --> 10 <div class='slidereveal-overlay'></div> 11 </body> 12</htmk> 13
Example: CSS (optional)
Minimal CSS (if you want to further style or animate):
1/* Example: style the overlay */ 2.slidereveal-overlay { 3 transition: opacity 0.3s; 4 /* You may override overlayColor via JS option */ 5} 6 7/* Panel content styling (if needed) */ 8.slidereveal-panel-content { 9 box-sizing: border-box; 10 /* Add your custom styles */ 11}
Most styling is handled by JS inline styles; extra CSS is optional.
License
MIT — free for personal and commercial use.
Author
- Mykhailo Kulyk
- Inspired by Natthawat Pongsri (original jQuery SlideReveal)
No vulnerabilities found.
No security vulnerabilities found.