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 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.
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"> <header> <h2>Menu</h2> </header> </nav> <main id="panel"> <header> <h2>Panel</h2> </header> </main>
The CSS
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 {
position:relative;
z-index: 1;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
Slideout.js
Add Slideout.js and create a new instance 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>
API
Slideout(options)
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). options.menu (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)
Demo Download
More about the project on GitHub.