Mobile friendly, animated, reusable angular.js slideout directive.
JavaScript HTML CSS
Latest commit 7e381b6 Apr 8, 2016 @mfbx9da4 fixed demo
Permalink
Failed to load latest commit information.
demo updated readme Apr 8, 2016
src updated readme Apr 8, 2016
.gitignore added bundle making it an npm package Apr 8, 2016
Readme.md readme Apr 8, 2016
gulpfile.js updated readme Apr 8, 2016
index.html fixed demo Apr 8, 2016
index.js readme Apr 8, 2016
package.json updated readme Apr 8, 2016
slideout.min.js updated readme Apr 8, 2016

Readme.md

Angularjs Slideout

Lightweight angular slideout directive for mobile which does not require angular-animate.js

Demo

Dependencies

  • angular
  • Optional dependency of angular touch for swiping menu away

Install

If you are using npm or webpack

npm install --save angular-slideout

Import angular-slideout after angular and require it as a module to your app.

var angular_slideout = require('angular-slideout');
var app = angular.module('app', ['angular-slideout', 'ngTouch']);
app.controller('main', function($scope) {});

Otherwise import slideout.min.js as so.

<!-- Angular -->
<script src="http://code.angularjs.org/1.2.19/angular.min.js"></script>
<!-- Angular touch (not required) -->
<script src="http://code.angularjs.org/1.2.19/angular-touch.min.js"></script>
<!-- Slideout module -->
<script src="slideout.min.js"></script>
<!-- Your App Code -->
<script>
    // import angular-slideout
    var app = angular.module('app', ['angular-slideout', 'ngTouch']);
    app.controller('main', function($scope) {});
</script>

Usage

Configure your sidebar content

<nav slideout="show_menu" slideout-direction="from-left">
  <div class="back-button" ng-click="show_menu = false;">Back</div>
  <h2>Menu content</h2>
</nav>
  • The slideout attribute: Use a boolean variable to determine whether to show slideout.
  • The slideout direction: Options are from-left or from-right

Configure sidebar toggles

<div class="show-sidebar" ng-click="show_menu = true;">
  Show sidebar
</div>

Configure swipe toggles (requires angular-touch)

<div class="container"
     ng-swipe-left="show_menu = true"
     ng-swipe-right="show_menu = false; show_sub_menu = false;">
     ...
</div>