Slideout.js
A touch slideout navigation menu for your mobile web apps.
Features
- Dependency-free.
- Simple markup.
- Native scrolling.
- Easy customization.
- CSS transforms & transitions.
- Just 2 Kb! (min & gzip)
Demo
Check out the demo to see it in action (on your mobile or emulate touches on your browser).
Installation
Slideout is available on cdnjs
Also you can use one of many package managers
$ npm install slideout
$ spm install slideout
$ bower install slideout.js
$ component install mango/slideout
Usage
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.
Menu Panel
Add the Slideout.js styles (index.css) in your web application.
Then you just include Slideout.js and create a new instance with some options:
Full example
Slideout Demo Menu ☰ Panel
Browser Support
- Chrome (IOS, Android, desktop)
- Firefox (Android, desktop)
- Safari (IOS, Android, desktop)
- Opera (desktop)
- IE 10+ (desktop)
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
orright
). Default:left
.
var slideout = 'panel': document 'menu': document 'padding': 256 'tolerance': 70;
Slideout.open();
Opens the slideout menu. It emits beforeopen
and open
events.
slideout;
Slideout.close();
Closes the slideout menu. It emits beforeclose
and close
events.
slideout;
Slideout.toggle();
Toggles (open/close) the slideout menu.
slideout;
Slideout.isOpen();
Returns true
if the slideout is currently open, and false
if it is closed.
slideout; // true or false
Slideout.destroy();
Cleans up the instance so another slideout can be created on the same area.
slideout;
Slideout.enableTouch();
Enables opening the slideout via touch events.
slideout;
Slideout.disableTouch();
Disables opening the slideout via touch events.
slideout;
Slideout.on(event, listener);
slideout;
Slideout.once(event, listener);
slideout;
Slideout.off(event, listener);
slideout;
Slideout.emit(event, ...data);
slideout;
Events
An instance of Slideout emits the following events:
beforeclose
close
beforeopen
open
translate
The slideout emits translate
event only when it is opening/closing via touch events.
slideout;
npm-scripts
$ npm run build
$ npm run dist
$ npm test
$ npm run hint
FAQ
How to add a toggle button.
// vanilla jsdocument; // jQuery;
How to open slideout from right side.
You should define left: auto
on the class .slideout-menu
.
Then, use the side
option with the value right
.
var slideout = 'panel': document 'menu': document 'side': 'right';
With ❤ by
- Guille Paz (Front-end developer | Web standards lover)
- E-mail: guille87paz@gmail.com
- Twitter: @pazguille
- Web: http://pazguille.me
License
MIT license. Copyright © 2015 Mango.