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.

    Install

    npm i ember-slide-push-menu

    DownloadsWeekly Downloads

    62

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    405 kB

    Total Files

    13

    Last publish

    Collaborators

    • rajasegar