Ember-cli-sliding-menu

Welcome to ember-cli-sliding-menu addon

This is another convenient component representing the side sliding-menu (left or right). Originally was inspired by similar existing addons/libraries. It has some features since it was designed for mobile applications at first:

• Performance optimized for mobile applications (tested for cordova app on iOS)
• It has the effect of inertia
• Highly customizable
• Separated handler so your app won't experience any conflict
• Easy to use (see below)
• For desktop apps there is a commented frost-glass effect logic (beta)

Example

Ember Cli Sliding Menu EXAMPLE Here you can find convenient example with bucket of supporting features, like:

• background-overlay which gives an opportunity to close menu by clicking to the free of opened menu
• toggle-menu which helps to handle menu open/close via buttons click/action

Dependencies

• Hammer

Usage

1. Install the addon

  $ ember install:addon ember-cli-sliding-menu

1. Use the component where you need it

  {{#sliding-menu appIdentifier='.app'}}
    //... your menu items goes here
  {{/sliding-menu}}

1. That's all. Now everything you need is decorate your menu

P.S. In order to get rid from any possible glitches it's highly recommended to set property appIdentifier not to '.ember-application' container itself(default) but to its descendant. In the example above I'm using className - '.app' for Application's View

Configurations

There are plenty of options available.

1. Transition trough menu item with menu-closing In your application controller:

  import Ember from 'ember';
  import MenuHelper from 'testing-menu/mixins/menu-helper';

  export default Ember.Controller.extend(MenuHelper, {});

Add menu item

      <div class="menu">
          <div {{action "transitionFromMenu" "home"}} class="menu-item">Home page</div>
    </div>

1. Options represented by properties you can pass to component:
2. slideDirection: @String 'toLeft|toRight' default: 'toLeft' - menu placement, toLeft means from right to left
3. pannableWidth: @Number > 0 default: 40 - width of zone where menu can be invoked
4. defaultSpeed: @Double > 0.00 && < 1.00 default: 0.03 - menu animation speed

Authors and Contributors

Vladimir Katansky

Support or Contact

Having trouble with addon? Contact pointhomefinal@gmail.com and I’ll help you sort it out.

What's next?

I'm going to write a blog post on my blog about how everything works for educational purposes.