1.0.0 • Published 8 years ago

rs-slide-menu v1.0.0

Weekly downloads
15
License
MIT
Repository
github
Last release
8 years ago

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"
  }
}
OptionTypeDescription
togglerstringcss selector of togglers
prefixstringprefix to all class names
sidestring ('left', 'right')which side show menu
zIndexnumberz-index of menu
bgColorstringcolor of backdrop
bgOpacitystringopacity of backdrop
animationobjectanimation params
durationstring/numbertransition duration in ms
easingstringtransition 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.