Simple Off-canvas Push Menu with Pure JavaScript – Slideout.js

Category: Javascript , Menu & Navigation , Recommended | December 6, 2016
Views Total:2,821 views
Official Page:Go to website
Last Update:December 6, 2016


Simple Off-canvas Push Menu with Pure JavaScript – Slideout.js


Slideout.js is a pure JavaScript library for creating a mobile-friendly sidebar push menu on your web applications.

The off-canvas navigation uses CSS3 transitions & transforms to slide out the off-canvas menu while pushing the main content area to the right.

How to use it:

Create a navigation for the off-canvas push menu.

<nav id="menu" class="menu">

Add the main content into the ‘main’ container.

<main id="main" class="panel">

Create a toggle button for the off-canvas push menu.

<main id="main" class="panel">
  <button class="js-slideout-toggle">
    Open slideout

Load the Slideout.js at the bottom of your document.

<script src="dist/slideout.js"></script>

Enable the off-canvas menu & toggle button.

var slideout = new Slideout({
  'panel': document.getElementById('main'),
  'menu': document.getElementById('menu'),
  'padding': 256,
  'tolerance': 70
document.querySelector('.js-slideout-toggle').addEventListener('click', function() {

The core CSS styles.

body {
  width: 100%;
  height: 100%;
.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: none;
.slideout-panel {
  position: relative;
  z-index: 1;
.slideout-open body { overflow: hidden; }
.slideout-open .slideout-menu { display: block; }

Add your own styles to the off-canvas push menu.

.slideout-menu {
.slideout-panel {



  • Add css improvements, update docs and rename option fx to easing

You Might Be Interested In:

Leave a Reply