移动Web的触摸滑出式导航菜单:Slideout.js

jopen 9年前

用于移动Web应用程序的触摸滑出式导航菜单。

特性

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

Slideout.js demo

安装

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

html,  body {    width: 100%;    height: 100%;  }    .slideout-menu {    position: fixed;    left: 0;    top: 0;    bottom: 0;    right: 0;    z-index: 0;    width: 256px;    overflow-y: scroll;    -webkit-overflow-scrolling: touch;    display: none;  }    .slideout-panel {    position:relative;    z-index: 1;  }    .slideout-open,  .slideout-open body {    overflow: hidden;  }    .slideout-open .slideout-menu {    display: block;  }

Then you just include Slideout.js and create a new instace 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>

完整示例
<!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>        html,        body {          width: 100%;          height: 100%;        }          .slideout-menu {          position: fixed;          left: 0;          top: 0;          bottom: 0;          right: 0;          z-index: 0;          width: 256px;          overflow-y: scroll;          -webkit-overflow-scrolling: touch;          display: none;        }          .slideout-panel {          position:relative;          z-index: 1;        }          .slideout-open,        .slideout-open body {          overflow: hidden;        }          .slideout-open .slideout-menu {          display: block;        }      </style>    </head>    <body>        <nav id="menu">        <h2>Menu</h2>      </nav>        <main id="main">        <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>

浏览器支持

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

项目主页:http://www.open-open.com/lib/view/home/1425459301759