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
});