❤
npm
Sign UpSign In

ember-slide-push-menu

2.0.0 • Public • Published

ember-slide-push-menu

Build and Deploy Coverage Status semantic-release npm version EmberObserver

Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body.

Inspired by this Codrops article

ember install ember-slide-push-menu

Demo

Demo

Usage

Render the menu using the component

{{#esp-menu position="left"  open=showLeftSlideMenu}}
  <h3>Menu</h3>
    <a href="#">Celery seakale</a>
    <a href="#">Dulse daikon</a>
    <a href="#">Zucchini garlic</a>
    <a href="#">Catsear azuki bean</a>
    <a href="#">Dandelion bunya</a>
    <a href="#">Rutabaga</a>
{{/esp-menu}}

Trigger the menu using a button

<button onclick={{action 'toggleMenu' 'showLeftSlideMenu'}}>Show/Hide Left Slide Menu</button>

Toggle the property set in your component/route/controller

export default Ember.Controller.extend({
  showLeftSlideMenu: false,
 
  actions: {
    toggleMenu(key) {
      this.toggleProperty('showLeftSlideMenu');
    },
  }
 
});
 

Use custom class

{{#esp-menu position="left" pushMenu=pushLeftMenu open=showLeftSlideMenu customClasses='my-custom-menu'}}
  <h3>Menu</h3>
    <a href="#">Celery seakale</a>
    <a href="#">Dulse daikon</a>
    <a href="#">Zucchini garlic</a>
    <a href="#">Catsear azuki bean</a>
    <a href="#">Dandelion bunya</a>
    <a href="#">Rutabaga</a>
{{/esp-menu}}

Customizing with your class for the menus

/* Custom classes */
.my-custom-menu {
      background: red;
}
 
.my-custom-menu h3 {
      color: yellow;
      font-size: 1.9em;
      padding: 20px;
      margin: 0;
      font-weight: 300;
      background: maroon;
}
 
.my-custom-menu a {
      display: block;
      color: yellow;
      font-size: 1.1em;
      font-weight: 300;
}
 
.my-custom-menu a:hover {
      background: lightred;
}
 
.my-custom-menu a:active {
      background: maroon;
      color: pink;
}
 

Running

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit https://ember-cli.com/. See the Contributing guide for details.

License

This project is licensed under the MIT License.

/ember-slide-push-menu/

    Package Sidebar

    Install

    npm i ember-slide-push-menu

    Repository

    github.com/rajasegar/ember-slide-push-menu

    Homepage

    github.com/rajasegar/ember-slide-push-menu#readme

    Weekly Downloads

    43

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    405 kB

    Total Files

    13

    Last publish

    Collaborators

    • rajasegar
    Try on RunKit
    Report malware