https://github.com/rajasegar/ember-slide-push-menu
Ember Slide and Push Menus
https://github.com/rajasegar/ember-slide-push-menu
ember ember-addon menu menu-navigation
Last synced: about 1 year ago
JSON representation
Ember Slide and Push Menus
- Host: GitHub
- URL: https://github.com/rajasegar/ember-slide-push-menu
- Owner: rajasegar
- License: mit
- Created: 2017-07-07T02:12:41.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-11-05T16:26:20.000Z (over 1 year ago)
- Last Synced: 2025-03-27T00:23:11.997Z (about 1 year ago)
- Topics: ember, ember-addon, menu, menu-navigation
- Language: JavaScript
- Homepage: https://rajasegar.github.io/ember-slide-push-menu/
- Size: 2.06 MB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-slide-push-menu
[](https://coveralls.io/github/rajasegar/ember-slide-push-menu?branch=master)
[](https://github.com/semantic-release/semantic-release)
[](https://npmjs.org/package/ember-slide-push-menu "View this project on npm")
[](http://emberobserver.com/addons/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](https://tympanus.net/codrops/2013/04/17/slide-and-push-menus/)
```sh
ember install ember-slide-push-menu
```
## Demo
[Demo](https://rajasegar.github.io/ember-slide-push-menu/)
## Usage
### Render the menu using the component
```hbs
Menu
Celery seakale
Dulse daikon
Zucchini garlic
Catsear azuki bean
Dandelion bunya
Rutabaga
```
### Trigger the menu using a button
```hbs
Show/Hide Left Slide Menu
```
### Toggle the property set in your component/route/controller
```js
import { action } from '@ember/object';
export default class IndexController extends Controller {
showLeftSlideMenu = false;
@action
toggleMenu() {
this.showLeftSlideMenu = !this.showLeftSlideMenu;
}
}
```
### Use custom class
```hbs
Menu
Celery seakale
Dulse daikon
Zucchini garlic
Catsear azuki bean
Dandelion bunya
Rutabaga
```
### Customizing with your class for the menus
```css
/* 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 .
## 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 .
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).