{{partial "shared/navbar"}}
{{outlet}}
{{outlet "footer"}}
{{partial "shared/navbar"}}
{{outlet}}
Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tsubik/ember-side-menu
Side menu component for Ember.js applications
https://github.com/tsubik/ember-side-menu
burger-menu ember ember-addon mobile-menu
Last synced: 3 months ago
JSON representation
Side menu component for Ember.js applications
- Host: GitHub
- URL: https://github.com/tsubik/ember-side-menu
- Owner: tsubik
- License: mit
- Created: 2016-06-03T16:32:36.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-03-21T18:15:00.000Z (almost 3 years ago)
- Last Synced: 2024-10-03T12:27:27.214Z (4 months ago)
- Topics: burger-menu, ember, ember-addon, mobile-menu
- Language: JavaScript
- Homepage: https://tsubik.com/ember-side-menu/
- Size: 1.8 MB
- Stars: 60
- Watchers: 3
- Forks: 14
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Ember-side-menu
[](https://travis-ci.org/tsubik/ember-side-menu)
[](https://emberobserver.com/addons/ember-side-menu)
[](https://badge.fury.io/js/ember-side-menu)
Mobile friendly Ember menu component using CSS transitions. More effects and SVG path animations coming soon.
## Demo
Check out the live demo [here][live-demo]
## Ember Compability
This addon is compatible with and tested against Ember 2.x and higher.
## Installation
`ember install ember-side-menu`
Import ember-side-menu styles in your application's `app.scss` file.
`@import "ember-side-menu";`
## Usage
### Side Menu
`{{#side-menu}}` component is a main container of your menu. Place it on some top level of your DOM
document for example in `application.hbs` file.
``` handlebars
{{#side-menu}}
{{/side-menu}}
{{content-backdrop}}
{{partial "shared/navbar"}}
{{outlet}}
```
#### Parameters
* id - (string), menu Id, use when using multiple menus, default: "default"
* side - (string), which side of screen your menu takes. Possible values: ["left", "right"], default: "left"
* width - (string), target width of open menu. CSS width - example values: ["40px", "40%", ...], default: null (default width set in
CSS stylesheet to 70%)
* initialTapAreaWidth - (integer, in px) - area width on left/right screen edge when menu swipe opening
is initiated, default: 30
* slightlyOpenWidth - (integer, in px) - width of slightly open menu. Menu is opened slightly on tap event
within `initialTapAreaWidth` to the edge, default: 20
* slightlyOpenAfter - (integer, in ms) - time delay after which menu is slighlty opened if it is still closed,
default: 300
### Content Backdrop
If you want to add backdrop to the rest of the layout while menu opening, then just place `{{content-backdrop}}`
component after `{{#side-menu}}` component.
``` handlebars
{{#side-menu}}
...
{{/side-menu}}
{{content-backdrop}}
```
#### Parameters
* menuId - (string), id of controlled menu, default: "default"
### Side Menu Toggle
Like a button component to toggle menu.
You can use default toggle button consist with some toggle bars
``` handlebars
{{side-menu-toggle}}
```
You can use your own design block.
``` handlebars
{{#side-menu-toggle}}
{{/side-menu-toggle}}
```
You can create a custom one by extending the main component.
``` javascript
import SideMenuToggle from "ember-side-menu/components/side-menu-toggle";
export default SideMenuToggle.extend({
tagName: "button",
classNames: ["navbar-btn", "btn", "btn-link", "pull-left"],
});
```
#### Parameters
* side - (string), which side of screen your menu toggle takes. Possible values: ["left", "right"], default: "left"
* menuId - (string), id of controlled menu, default: "default"
### Side Menu Link To
Works like a standard `{{link-to}}` helper, but also closes the menu.
``` handlebars
{{#side-menu-link-to "new"}}
New Event
{{/side-menu-link-to}
```
#### Parameters
* menuId - (string), id of menu which should be closed when clicking, default: "default"
### Using multiple side menus
There is a possiblity to declare more instances of side menu components, and control them separately.
Default menu id is `default` and it could be omitted, if you want to use more than one instance of side-menu
you should not forget about setting relevant `menuId` for connected menu components.
``` handlebars
{{#side-menu side="left" id="leftMenu"}}
Left Menu
{{/side-menu}}
{{#side-menu side="right" id="rightMenu"}}
Right Menu
{{/side-menu}}
{{side-menu-toggle menuId="leftMenu"}}
{{side-menu-toggle menuId="rightMenu"}}
{{content-backdrop menuId="leftMenu"}}
{{content-backdrop menuId="rightMenu"}}
```
### Side Menu Service
There is an available `sideMenu` service to control the menu.
``` javascript
export default Ember.Route.extend({
sideMenu: Ember.inject.service(),
actions: {
openSideMenu() {
this.get("sideMenu").open();
},
},
});
```
#### Methods
* open(menuId='default')
* close(menuId='default')
* toggle(menuId='default')
#### Properties
For backward compability there is a possiblity to control or check `default` menu properties directly on service object.
* isOpen (boolean)
* isClosed (boolean)
* isSlightlyOpen (boolean)
* progress (number) 0-100
When using mutliple menus or changing default `menuId` then menu's state is held in `menus` object.
For example to get `isOpen` property for menu with id `sampleMenu` we can use `this.get("sideMenu.menus.sampleMenu.isOpen"`.
## License
MIT
[live-demo]: https://tsubik.com/ember-side-menu