dark-overlay-sliding-menu-animator

A sliding menu animator for OnsenUI which provides a darker overlay.

Installation

Install with bower:

bower install dark-overlay-sliding-menu-animator

Usage

Use the ons-sliding-menu component and set the type attribute to something like 'dark-overlay':

<ons-sliding-menu
  menu-page="menu.html" main-page="main.html"
  type="dark-overlay" max-slide-distance="260px" swipeable="true" />

Register the animator in the controller responsible for interacting with the ons-sliding-menu:

(function(){
  'use strict';
 
  var module = angular.module('AppController', []);
 
  module.controller('AppController', [
    '$scope',
    'SlidingMenuView',
    'DarkOverlaySlidingMenuAnimator',
    function($scope, SlidingMenuView, DarkOverlaySlidingMenuAnimator) {
 
    SlidingMenuView.registerSlidingMenuAnimator('dark-overlay',
        new DarkOverlaySlidingMenuAnimator());
  }]);
})();

The type attribute in your markup must match the name argument passed to SlidingMenuView.registerSlidingMenuAnimator().

License: Apache 2.0