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.
Last updated 11 days ago by rajasegar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-slide-push-menu 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 2.0.0                                ...           latest (11 days ago)

11 Versions

  • 2.0.0                                ...           11 days ago
  • 1.1.1                                ...           6 months ago
  • 1.1.0                                ...           8 months ago
  • 1.0.2                                ...           8 months ago
  • 1.0.0                                ...           2 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 13
Last Day 0
Last Week 0
Last Month 2
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |