Slidereveal demo

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.

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.

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!)

How to use

Include SlideReveal and HTML markup



<!-- selector div#wrapper -->
<html>
    <title>SlideReveal #wrapper selector</title>
    <body>
        <div id='wrapper'>
            <header>
                <button class='toggle-panel'>Trigger</button>
            </header>
            <article>Any content here!</article>
        </div>
        <div id='panel'>
            <h2>Menu</h2>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </div>
        <script src="/js/slidereveal.min.js"></script>
        <script>
            const menu = new SlideReveal('#panel', {
                selector: '#wrapper'
            });
        </script>
    </body>
</html>

<!-- selector body -->
<html>
<title>SlideReveal body selector</title>
    <body>
        <header>
            <button class='toggle-panel'>Trigger</button>
        </header>
        <article>Body content here!</article>
        <div id='panel'>
            <h2>Menu</h2>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </div>
        <script src="/js/slidereveal.min.js"></script>
        <script>
            const menu = new SlideReveal('#panel', {
                selector: 'body'
            });
        </script>
    </body>
</html>

Warning about `selector` usage

If you use a wrapper element selector (e.g., #wrapper), the sliding panel will only move or apply effects (such as push, filter, etc.) to the content inside that container.
If you use the 'body' selector, SlideReveal wraps the entire <body> content (except the panel itself and overlay) inside a special container to allow for push and filter effects on the whole page.

⚠️ Mixing different layouts and selectors may affect the behavior and appearance of the panel!

If the panel is a direct child of <body> and you use selector: 'body', the library will create a wrapper for all page content.
If your main content is already wrapped in a container (like <div id="wrapper">), it's better to use that container as your selector value.

Best practice:
Match your selector option to the actual layout structure of your page to avoid unexpected visual effects or content shifts.

If you have any doubts, check the developer tools to see how SlideReveal is wrapping and manipulating content.

Javascript


// SlideReveal initialization and all options list
const menu = new SlideReveal('#panel', {
    width: 320,
    position: 'right',
    filter: true,
    filterStyle: 'blur(2px)',
    overlay: true,
    overlayColor: 'rgba(0,0,0,0.3)',
    closeOnOutsideClick: true,
    speed: 400,
    pushBody: true,
    selector: '#wrapper', // 'body' default
    trigger: '.toggle-panel',
    autoEscape: true,
    zIndex: 1050,
    classNames: {},
    onInit: () => null,
    onOpen: () => null,
    onClose: () => null,
    onEscape: () => null,
    ariaLabel: 'Sidebar Menu',
});

// Events
menu.onInit = () => { console.log('Init!') };
menu.onOpen = () => { console.log('Opened!') };
menu.onClose = () => { console.log('Closed!'); };
menu.onEscape = () => { console.log('Escape pressed!') };

// Methods
menu.open();
menu.close();
menu.toggle();
menu.destroy();

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`

Right Panel


const menu = new SlideReveal('#panel', {
    position: 'right',
    filter: true,
    pushBody: true,
    filterStyle: 'blur(3px) grayscale(100%)'
});

Left Panel