AngularJS Pageslide directive

An AngularJS directive which slides another panel over your browser to reveal an additional interaction pane.

See it in action HERE

More examples in the repository.

Usage

Add this in your head

<script src="src/angular-pageslide-directive.js"></script>
<link rel="stylesheet" type="text/css" href="css/angular-pageslide.less.css">

Use within your Angular app

var app = angular.module("app", ["pageslide-directive"]);

Your HTML should look like this

<a pageslide="right" ps-speed="0.5" href="#target">Link text</a>

<div id="target"  style="display:none">            
<p>some random content...</p>
<a id="target-close" href="#">Click to close</a>
</div>

or you can use it like an element and open close with the ps-open attribute

<pageslide="right" ps-speed="0.5" ps-target="#target" ps-open="checked" href="#target"></pageslide>

<div id="target"  style="display:none">            
<p>some random content...</p>
</div>

Options:

pageslide = Where the panel should appear (right,left,top,bottom)
ps-speed = The speed of the transition (optional)
ps-open  = true/false used to open and close the panel (optional)
ps-target = "#target" used when using pageslide as an element

Licensing

Licensed under MIT

Author

2013, Daniele Piccone @danielepiccone

[Github Page] (http://dpiccone.github.io/ng-pageslide/)