Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单

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).

Installation

$ 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.

<nav id="menu">   <header>     <h2>Menu</h2>   </header> </nav>  <main id="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-open body, .slideout-open .slideout-panel {   overflow: hidden; }  .slideout-open .slideout-menu {   display: block; }

Then you just include Slideout.js and create a new instance with some options:

<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>

Full example

<!doctype html> <html lang="en">   <head>     <meta charset="utf-8">     <title>Slideout Demo</title>     <meta http-equiv="cleartype" content="on">     <meta name="MobileOptimized" content="320">     <meta name="HandheldFriendly" content="True">     <meta name="apple-mobile-web-app-capable" content="yes">     <meta name="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-open body,       .slideout-open .slideout-panel {         overflow: hidden;       }        .slideout-open .slideout-menu {         display: block;       }     </style>   </head>   <body>      <nav id="menu">       <h2>Menu</h2>     </nav>      <main id="panel">       <header>         <button>☰</button>         <h2>Panel</h2>       </header>     </main>      <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>    </body> </html>

Browser Support

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

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:.
[options.fx] (String) - The CSS effect to use when animating the opening and closing of the slideout. Default: ease .
[options.padding] (Number) - Default:.
[options.tolerance] (Number) - Default:.

var slideout = new Slideout({   'panel': document.getElementById('main'),   'menu': document.getElementById('menu'),   'padding': 256,   'tolerance': 70 });