jQuery
【jQuery】軽量のシンプルなタッチスライドアウトナビゲーション。Slideout.js
May 1, 2016

Slideout.jsは軽量のシンプルなマークアップで実装できるモバイルWebアプリケーション用のタッチスライドアウトのナビゲーションメニュープラグイン。
<nav id="menu"> <header> <h2>Menu</h2> </header> </nav> <main id="panel"> <header> <h2>Panel</h2> </header> </main>
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; }
<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>
MITライセンス。