A touch slideout navigation menu for your mobile web apps.
- Dependency-free.
- Simple markup.
- Native scrolling.
- Easy customization.
- CSS transforms & transitions.
- Just 4 Kb!
Check out the demo to see it in action (on your mobile or emulate touches on your browser).
$ npm install slideout
$ spm install slideout
$ bower install https://github.com/Mango/slideout.git
$ component install mango/slideout
Implementing Slideout.js into your project is easy.
First of all, you'll need to create your markup. You should have a menu (#menu) and a main content (#panel) into your body.
<navid="menu"><header><h2>Menu</h2></header></nav><mainid="panel"><header><h2>Panel</h2></header></main>Add the Slideout.js styles (index.css) in your web application.
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-openbody,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}Then you just include Slideout.js and create a new instace with some options:
<scriptsrc="dist/slideout.min.js"></script><script>varslideout=newSlideout({'panel': document.getElementById('panel'),'menu': document.getElementById('menu'),'padding': 256,'tolerance': 70});</script><!doctype html><htmllang="en"><head><metacharset="utf-8"><title>Slideout Demo</title><metahttp-equiv="cleartype" content="on"><metaname="MobileOptimized" content="320"><metaname="HandheldFriendly" content="True"><metaname="apple-mobile-web-app-capable" content="yes"><metaname="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><style>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-openbody,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
</style></head><body><navid="menu"><h2>Menu</h2></nav><mainid="panel"><header><button>☰</button><h2>Panel</h2></header></main><scriptsrc="dist/slideout.min.js"></script><script>varslideout=newSlideout({'panel': document.getElementById('panel'),'menu': document.getElementById('menu'),'padding': 256,'tolerance': 70});</script></body></html>- Chrome (IOS, Android, desktop)
- Firefox (Android, desktop)
- Safari (IOS, Android, desktop)
- Opera (desktop)
- IE 10+ (desktop)
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.
varslideout=newSlideout({'panel': document.getElementById('main'),'menu': document.getElementById('menu'),'padding': 256,'tolerance': 70});Opens the slideout menu.
slideout.open();Closes the slideout menu.
slideout.close();Toggles (open/close) the slideout menu.
slideout.toggle();Returns true if the slideout is currently open, and false if it is closed.
slideout.isOpen();// true or false$ npm run build
$ npm run dist
$ npm test
$ npm run hint
- Guille Paz (Front-end developer | Web standards lover)
- E-mail: guille87paz@gmail.com
- Twitter: @pazguille
- Web: http://pazguille.me
MIT license. Copyright © 2015 Mango.