Drawer Style Sliding Box With jQuery - slidebox.js

slidebox.js is a jQuery plugin used to create drawer style boxes & panels sliding from the edge of the screen. Great for sidebar navigation, social share box, contact us panel, and much more.

The Drawer can be anchored to any toggle element (called 'handle') which sticks to anywhere on the edge of the screen (top, right, left, right).

How to use it:

1. Insert the minified version of the slidebox.js plugin after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.slidebox.min.js"></script>

2. Insert your own content together with a handle into the drawer box.

<div id="jquery-slidebox">
  <div class="handle">
    Toggle Button
  </div>
  <div class="contents">
    Drawer Content Here
  </div>
</div>

3. Apply your own CSS styles to the drawer box.

#jquery-slidebox {
  width: 300px;
  margin: 0;
  padding: 0px;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333;
  border-left: solid 1px #333333;
  background: #EDEDED;
}

#jquery-slidebox .handle {
  margin: 0;
  padding: 10px 0;
  line-height: 100%;
  background: #666666;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
}

#jquery-slidebox .contents {
  margin: 0;
  padding: 30px 0 35px 0;
}

4. Activate the drawer box and done. By default, the drawe box will be placed on the left side of the screen.

$('#jquery-slidebox').slidebox({
  handle: '.handle',
  contents: '.contents'
});

5. Stick the drawe box to the right side of the screen.

$('#jquery-slidebox').slidebox({
  handle: '.handle',
  contents: '.contents',
  direction: 'desc'
});

6. Stick the drawe box to the top of the screen.

$('#jquery-slidebox').slidebox({
  handle: '.handle',
  contents: '.contents',
  axis: 'y'
});

7. Stick the drawe box to the bottom of the screen.

$('#jquery-slidebox').slidebox({
  handle: '.handle',
  contents: '.contents',
  axis: 'y',
  direction: 'desc'
});

8. Set the distance from the top or left. Default: 0.

$('#jquery-slidebox').slidebox({
  handle: '.handle',
  contents: '.contents',
  space: 40
});

9. Detemine the action to toggle the drawer box. Default: 'click'.

$('#jquery-slidebox').slidebox({
  handle: '.handle',
  contents: '.contents',
  action: 'dbclick'
});

10. Customize the sliding effect.

$('#jquery-slidebox').slidebox({
  handle: '.handle',
  contents: '.contents',
  speed: 300,
  easing: 'swing'
});

11. Callback functions.

$('#jquery-slidebox').slidebox({
  handle: '.handle',
  contents: '.contents',
  openBeforeFunc: : function(container, handle, contents) {
    // do something
  },
  closeBeforeFunc: : function(container, handle, contents) {
    // do something
  },
  openAfterFunc: function(container, handle, contents) {
    // do something
  },
  closeAfterFunc: function(container, handle, contents) {
    // do something
  }
});

---

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