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">
  ...
</nav>

Add the main content into the ‘main’ container.

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

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

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

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() {
  slideout.toggle();
});

The core CSS styles.

html,
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,
.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 {
  ...
...
}

Changelog:

12/06/2016

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