Tiny JavaScript Library To Create Sliding Off-canvas Panels – Side by Slide Panel

Side by Slide Panel is a small and easy-to-use JavaScript library for creating app-style off-canvas side navigation & panels that slides out of the edge of your screen while pushing the main container to the other side.

How to use it:

Download the Side by Slide Panel and include the fsp-sidepanel.js & fsp-sidepanel.css in the document.

<script src="fsp-sidepanel.js"></script>
<link rel="stylesheet" href="fsp-sidepanel.css">

Create a toggle element to active the off-canvas side panel.

<a id="toggle-element" href="#">Click to toggle</a>

Create the off-canvas panel.

<section id="main-container" class="fsp-wrapper">
  <div id="side-panel" class="fsp-sidepanel">
    <h2>I'm a side panel!</h2>
  </div>
</section>

Enable the off-canvas side panel.

fsp('#toggle-element', '#main-container', '#side-panel').sidepanel();

Side by Slide Panel provides a simple option to specify the slide direction.

fsp('#toggle-element', '#main-container', '#side-panel').sidepanel({
  side: 'left'
});

A method to toggle the side panel programmatically.

fsp('#toggle-element', '#main-container', '#side-panel').sidepanel().toggle()