Open

Sideout.js

Sideout.js

Simple navigational menus for your application

Download Sideout from Github

Installation

$ npm install slideout
$ yarn add slideout

Usage

1. First of all, you'll need to have a menu ("#menu")

<menu id="menu">
  <div>
    <h2> Navigation <h2>
  <div>
<menu>

2. Add the Sideout.js styles (router.css) in your web application.

body {
  width: 100%;
  height: 100%;
}
.sideout-menu {
  position: absolute;
  left: -264px;
  top: 0;
  z-index: 10;
  width: 264px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.sideout-open,
.sideout-open body {
  overflow: hidden;
}

3. Then you just include Sideout.js and create a new instace with some options.

<script src="dist/sideout.js"></script>
<script>
  let sideout = new Sideout({
    menu: querySelector('#menu'),
    animation: 'ease',
    duration: 250
  });