jQuery Plugin To Show A Slide-in Panel On Side - slidein.js

slidein.js a simple yet customizable jQuery/jQuery UI widget for an overlay panel (with a grab handle) that slides in and out from any dock. Ideal for off-screen nav & control panels.

How to use it:

1. Include the following CSS file in the document's head section:

<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="jquery.slidein.css">

2. Include jQuery, jQuery UI and the slidein.js script right before the </body> tag.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.slidein.js"></script>

3. You're allowed to embed any content (e.g. nav menu, controls) to the slide-in panel as this:

<div id="mypanel">
  ...
</div>

4. Enable the slide-in panel with default settings.

$("#mypanel").slidein (); 

5. Apply your own CSS styles to the slide-in panel.

/* the panel and grab handle */
.slidein { background : LightSkyBlue; }

/* the panel only */
.slidein-panel {
  overflow : hidden;
  padding : 20px;/* don't add width or height, use 'breadth' widget option as it works for horz and vert */
}

/* the handle only */
.slidein-handle { color : navy; }

6. Default configuration options.

$("#mypanel").slidein({

  // panel width or height depending on where its docked
  breadth: 250,       

  // the curve of the handle
  curve:10,           

  // panel shuts and won't open any more
  disabled:false,     

  // default to left
  dock: "left",       

  // panel and grab handle is hidden
  hidden:false,       

  // slide in panel opacity
  opacity: 1,         

  // true is open, false is closed
  open: true,         

  // how far the panel peeks into the main window
  peek: 10,           

  // percentage position of the handle, 0 = top, 50 = middle, 100 = bottom
  position:10,        

  // text to show in the grab handle
  prompt: "",         

  // animate speed for opening and closing in millisecs
  speed: 400,         

  // what actions open the panel
  toOpen: "click",    

  // what actions close the panel
  toClose: "click"    
  
}); 

Change log:

2017-10-30

• Fixed for IE

---

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