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: