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
. Possible values:ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
[options.padding]
(Number) - Default:256
.[options.tolerance]
(Number) - The number ofpx
needed for the menu can be opened completely, otherwise it closes. 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
translatestart
translate
translateend
The slideout emits translatestart
, translate
and translateend
events only when it is opening/closing via touch events.
slideout; slideout; slideout; // 'Start'// 'Translate 120'// 'End'
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';
How to enable slideout only on mobile devices.
You should use mediaqueries
:
{ }
Demo: http://codepen.io/pazguille/pen/mEdQvX
How to use slideout with a fixed header.
You should define a two class names: fixed
and fixed-open
.
Then, using slideout's events you should add / remove the fixed-open
class name from the fixed element.
slideout; slideout;
Demo: http://codepen.io/anon/pen/NqJGBp
How to disable dragging on some elements.
You can use the attribute data-slideout-ignore
to disable dragging on some elements:
Menu Panel Map ...
Demo: [TODO]
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.