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

File Size: 13.6 KB
Views Total: 3435
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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.


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

  // the curve of the handle

  // panel shuts and won't open any more

  // default to left
  dock: "left",       

  // panel and grab handle is hidden

  // 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

  // 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:


  • 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.