jQuery Plugin To Create A Full Page Sliding Panel - Slide Over

Slide Over is a simple lightweight jQuery plugin used to create a responsive sliding panel with a full page overlay covering entire visible page. A similar to the popular off-canvas menu hower you can add more rich content with this plugin.

How to use it:

1. Include jquery.slide-over.css into your head section and jquery.slide-over.js after jQuery library.

<link rel="stylesheet" href="css/jquery.slide-over.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.slide-over.js"></script>

2. Create a sliding panel as follows.

<div id="slideover-demo" class="slideover-content">
  Your content goes here
</div>

3. Create a link to toggle the sliding panel. By default, the content panel will slide out from the right hand side of your browser window. You can custom the orientation option in the Javascript on initialization.

<a href="#slideover-demo" id="slideover-open">Trigger Slideover</a>

4. Initialize the plugin with optional settings.

$('#sliderover-open').slideOver({
orientation: 'left', // default: 'right'
animationSpeed: 300, // default: 200
overlayColor: 'rgba(18,19,20,0.9)' // default: null
afterOpen: null, // callback
afterClose: null // callback
});

---

This awesome jQuery plugin is developed by jme783. For more Advanced Usages, please check the demo page or visit the official website.