Slideout.js – A touch slideout navigation menu for mobile web apps

This plugin is a straightforward navigation solution for anyone who requires lightweight touch navigation for a modern mobile web app.

Mobile and web apps are quite popular for the last couple of years and there are different ways of building such apps. There are many solutions and usually it is the functionality and versatility that plays a crucial role in choosing the right tools. Everyone who is building an app has to think about the user first, as the user is the final judge of whether an app is successful.

Every designer and developer knows that one of the most important things is the navigation. Users have to have a quick access to it without thinking too much and it should not disturb the overall experience. Slide out navigation menus are considered very useful and great from usability point of view.

Slideout.js – A touch slideout navigation menu for mobile web apps

Demo Download

Slideout.js is an excellent plugin that provides a touch slideout menu solution that can be used in different web projects. Some of the pros of using Slideout.js are that it is very lightweight (2 Kb! (min & gzip)) , dependency-free, includes native scrolling CSS transforms & transitions. The simple markup eases the customization and can be easily adjusted to fit any project.

Have a look at the code chunks below to see how you can use it.

Related post:  Alton - jQuery Scrolljacking Plugin

The markup:

To start, you have to write some code which includes an id=“menu” and main content id=”panel” inside <body></body> the tags.

<nav id="menu">
<main id="panel">


You also need to add the necessary css to your stylesheet to have a nice slideout menu navigation.

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


Add Slideout.js and create a new instance with some options.

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



Create a new instance of Slideout.

options (Object) - Options to customize a new instance of Slideout.
options.panel (HTMLElement) - The DOM element that contains all your application content (.slideout-panel). (HTMLElement) - The DOM element that contains your menu application (.slideout-menu).
[options.duration] (Number) - The time (milliseconds) to open/close the slideout. Default: 300.
[options.fx] (String) - The CSS effect to use when animating the opening and closing of the slideout. Default: ease.
[options.padding] (Number) - Default: 256.
[options.tolerance] (Number) - Default: 70.
[options.touch] (Boolean) - Set this option to false to disable Slideout touch events. Default: true.
[options.side] (String) - The side to open the slideout (left or right). Default: left.
var slideout = new Slideout({
'panel': document.getElementById('main'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70

Browser support:

  • Chrome (IOS, Android, desktop)
  • Firefox (Android, desktop)
  • Safari (IOS, Android, desktop)
  • Opera (desktop)
  • IE 10+ (desktop)
Related post:  Useful Tips for Web Design Template Newbies

Demo Download

More about the project on GitHub.

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.