Slideout.js触摸滑出式 Web App 导航菜单调用方法
2015-07-01 14:31
429 查看
https://github.com/mango/slideout/releases/
1. First of all, you'll need to have a menu ("#menu") and a main content ("#panel") into your body.
2. Add the Slideout.js styles (index.css) in your web application.
3. Then you just include Slideout.js and create a new instace with some options:
1. First of all, you'll need to 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>
2. 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; }
3. 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>
相关文章推荐
- 崩溃问题收集1----Illegal property type, c for appearance setter, _installAppearanceSwizzleForSetter
- Swift数据类型(基础篇)
- 对数组进行各种操作
- android中onNewIntent的简单说明
- Android ADB server didn't ACK * failed to start daemon * 简单有效的解决方案
- Unity3d《Shader篇》描边
- Android的AlertDialog详解(转载)
- android 项目R.java文件缺失导致编译错误
- AppDelegate中几个惯用的回调调用时机
- Android Percent Layout 安卓百分比布局
- 接口和扩展
- 怎么样android app正在使用STL库
- Android中的数据格式化
- Android---- 获取当前应用的版本号和当前android系统的版本号
- External SD card with ext4 under Android (CM10.1)
- Activity与Fragment数据传递之Fragment从Activity获取数据 分类: Android 2015-07-01 14:12 17人阅读 评论(0) 收藏
- swift 在线playground
- Android 区别普通Touch方法和Scroll
- Android 使用DexClassLoader要执行其他apk方法
- iOS绘图