Demo

Show Panel

A quick and easy way to add a contextual ajax sliding panel to your site.

Getting Started

Include the required files. 



<script type="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.slidepanel.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.slidepanel.css">

How to use

Add a panel trigger


<a href="external.html" data-slidepanel="panel">Show Panel</a>

Attach the plugin to your panel triggers.

<script type="text/javascript">
      $(document).ready(function(){
          $('[data-slidepanel]').slidepanel({
              orientation: 'top',
              mode: 'push'
          });
      });
</script>

Configuration Options


var options = {
	orientation: 'left', //default left, available: top, right, bottom, left
	mode: 'push', //default push, available: push, overlay
	static: false, //default false, available: true, false
}

Orientation sets the orientation of the rendered panel (top, right, bottom, left). Default is left.

Mode sets the animation mode for the panel. Push, will move the panel into view and push the document body out of the way. Overlay will animate the panel over the the document body.

If you have static content to display set static: true.

Credits

Created and maintained by William Golden