claire-lovisa/ember-slide-push-menu

Ember Slide and Push Menus

ember-slide-push-menu

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

Installation

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

• ember serve
• Visit your app at http://localhost:4200.

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/.