RS Slide Menu

Simple slide menu, without deps

Example

See example dir

Installation

npm install rs-slide-menu

Usage

Markup

<div id="nav">
    <div class="m-menu_item">
        <a href="#">Shop</a>
    </div>

    <div class="m-menu_item">
        <a href="#">About</a>
    </div>

    <div class="m-menu_item">
        <a href="#">Contacts</a>
    </div>
</div>

<button class="js-open-nav">Open</button>

<script src="rs-slide-menu.min.js"></script>
<script>
  var menu = SlideMenu.init('#nav', {
      toggler: '.js-open-nav'
  });
</script>

Styles

#nav {
    display: none;
}

Options

Default options

{
  "prefix": "rs-sm",
  "side": "left",
  "zIndex": "1500",
  "bgColor": "#000",
  "bgOpacity": "0.6",
  "animation": {
    "duration": "300",
    "easing": "ease"
  }
}

Option | Type | Description ------ | ---- | ----------- toggler | string | css selector of togglers prefix | string | prefix to all class names side | string ('left', 'right') | which side show menu zIndex | number | z-index of menu bgColor | string | color of backdrop bgOpacity | string | opacity of backdrop animation | object | animation params duration | string/number | transition duration in ms easing | string | transition timing function

Lint and build (for developers)

npm run lint
npm run build

License

Released under the MIT License. See the bundled LICENSE file for details.