[jQuery] Slideout.js: スライドするナビゲーションメニュー

横からスライド表示するナビゲーションメニュー。

[markdown]

JavaScript 単体で動作。
blog の分類上、jQuery に入れておく。

> * [Mango/slideout: A touch slideout navigation menu for your mobile web apps.](https://github.com/Mango/slideout)
> * [Slideout.js – A touch slideout navigation menu for your mobile web apps.](https://mango.github.io/slideout/)

## Browser support

公式より。

– Chrome (IOS, Android, desktop)
– Firefox (Android, desktop)
– Safari (IOS, Android, desktop)
– Opera (desktop)
– IE 10+ (desktop)

## Installation

JavaScript 単体で動作可能。

“`prettyprinted
% npm install slideout –save
“`

例えば [Sprockets の append_path に node_modules を追加して require する場合](https://www.d-wood.com/blog/2016/04/08_7906.html)はこうなる。

“`prettyprinted
//= require slideout/dist/slideout.js
“`

## Usage

ちょっと動かしたメモ。

### JavaScript

“`javascript
var slideout = new Slideout({
‘panel’: document.getElementById(‘panel’),
‘menu’: document.getElementById(‘menu’),
‘padding’: 256,
‘tolerance’: 70
});
// Toggle button
document.querySelector(‘.toggle-button’).addEventListener(‘click’, function() {
slideout.toggle();
});
“`

### CSS

“`css
.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;
will-change: transform;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
“`

## Sample

サンプルは、以下の通り。

See the Pen Slideout.js sample code by DriftwoodJP (@DriftwoodJP) on CodePen.

[/markdown]