• Dependency-free.
• Simple markup.
• Native scrolling.
• Easy customization.
• CSS transforms & transitions.
• Just 2 Kb!

$ npm install slideout$ bower install https://github.com/mango/slideout.git$ component install mango/slideout

1. First of all, you'll need to have a menu ("#menu") and a main content ("#panel") into your body.

<nav id="menu">  <header>    <h2>Menu</h2>  </header></nav><main id="panel">  <header>    <h2>Panel</h2>  </header></main>

2. Add the Slideout.js styles (index.css) in your web application.

body {  width: 100%;  height: 100%;}.slideout-menu {  position: fixed;  top: 0;  bottom: 0;  width: 256px;  min-height: 100vh;  overflow-y: scroll;  -webkit-overflow-scrolling: touch;  z-index: 0;  display: none;}.slideout-menu-left {  left: 0;}.slideout-menu-right {  right: 0;}.slideout-panel {  position: relative;  z-index: 1;  will-change: transform;  background-color: #FFF; /* A background-color is required */  min-height: 100vh;}.slideout-open,.slideout-open body,.slideout-open .slideout-panel {  overflow: hidden;}.slideout-open .slideout-menu {  display: block;}

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

<script src="dist/slideout.min.js"></script><script>  var slideout = new Slideout({    'panel': document.getElementById('panel'),    'menu': document.getElementById('menu'),    'padding': 256,    'tolerance': 70  });</script>