MUI - 侧滑菜单
各大APP必备的侧滑菜单栏,支持手势滑动。包含QQ式、美团式等
结构模板
这里是示例Html, 必须使用Mui框架才能使用。
主容器 <div class="mui-off-canvas-wrap mui-draggable"></div>
菜单窗体 <aside class="mui-off-canvas-right"></asign>
主窗体 <div class="mui-content mui-scroll-wrapper"></div>
左菜单 mui-off-canvas-left
右菜单 mui-off-canvas-right
<!--侧滑菜单容器--> <div id="Main" class="mui-off-canvas-wrap mui-draggable"> <!--菜单部分--> <aside id="offCanvasSide" class="mui-off-canvas-right"> <div id="offCanvasSideScroll" class="mui-scroll-wrapper"> <button id="offCanvasHide" type="button" >关闭侧滑菜单</button> </div> </aside> <!-- 主界面 --> <div class="mui-inner-wrap"> <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> <button id="offCanvasShow" type="button" >显示侧滑菜单</button> </div> <!-- 这个东西不能删,利用他还原界面 --> <div class="mui-off-canvas-backdrop"></div> </div> </div>
动画效果
主界面移动,菜单不动 默认
菜单移动,主界面不动 mui-slide-in
QQ式移动 mui-scalable
侧滑核心js代码
<script> mui.init ({ swipeBack: false, }); var Main = mui('#Main');//侧滑容器父节点 Main[0].classList.add('mui-scalable');//动画效果的类 Main.offCanvas().refresh();//绑定动画效果 document.getElementById('offCanvasShow').addEventListener('tap',function() { Main.offCanvas('show'); }); document.getElementById('offCanvasHide').addEventListener('tap',function() { Main.offCanvas('close'); }); //支持区域滚动,需要添加.mui-scroll-wrapper mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll(); //实现ios平台的侧滑关闭页面; if (mui.os.plus && mui.os.ios) { Main[0].addEventListener('shown', function(e) { //菜单显示完成事件 plus.webview.currentWebview().setStyle ({ 'popGesture': 'none' }); }); Main[0].addEventListener('hidden', function(e) { //菜单关闭完成事件 plus.webview.currentWebview().setStyle ({ 'popGesture': 'close' }); }); } </script>
以上已经实现了基本的功能。下面是对侧滑菜单进行基本美化
菜单美化
只需要覆盖原有的【asign】
即可
<style> html,body { background-color: #efeff4; } p { text-indent: 22px; } span.mui-icon { font-size: 14px; color: #007aff; margin-left: -15px; padding-right: 10px; } .mui-off-canvas-left { color: #fff; } .title { margin: 35px 15px 10px; } .title+.content { margin: 10px 15px 35px; color: #bbb; text-indent: 1em; font-size: 14px; line-height: 24px; } input { color: #000; } </style> <aside id="offCanvasSide" class="mui-off-canvas-left"> <div id="offCanvasSideScroll" class="mui-scroll-wrapper"> <div class="mui-scroll"> <div class="title">侧滑导航</div> <div class="content"> 这是可拖动式侧滑菜单示例,你可以在这里放置任何内容;关闭侧滑菜单有多种方式: 1.在手机屏幕任意位置向左拖动(drag);2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮 <span class="android-only">;4.Android手机按back键;5.Android手机按menu键 </span>。 <p style="margin: 10px 15px;"> <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button> </p> </div> <div class="title" style="margin-bottom: 25px;">侧滑列表示例</div> <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 2 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 3 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 4 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 5 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 6 </a> </li> </ul> </div> </div> </aside>
MUI - 侧滑菜单的更多相关文章
- mui侧滑菜单"点击含有mui-action-menu类的控件"无法实现侧滑
.mui-action-menu 标题栏 菜单按钮 指定href="#id"显示与隐藏侧滑菜单 html: <div class="mui-off-canvas-w ...
- 利用 MUI开发app, 如何实现侧滑菜单及其主体部分上下滑动
利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验. ...
- Hbuilder开发HTML5 APP之侧滑菜单
1.思路: 其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如: //plus ...
- SlidingMenu 侧滑菜单的用法
很多APP都有侧滑菜单的功能,部分APP左右都是侧滑菜单~SlidingMenu 这个开源项目可以很好帮助我们实现侧滑功能,将侧滑菜单引入项目的方式很多中,先通过例子介绍各种引入方式,然后给大家展示个 ...
- Android之自定义侧滑菜单
先来上图: 我们把主界面从左向右拉动,可以看到地下有一层菜单页,从透明渐渐变得不透明,从小渐渐变大,感觉上觉得菜单页是从屏幕外面被拉到屏幕中的.下面的代码实现这个DEMO: 首先是自定义控件Slidi ...
- 第三方侧滑菜单SlidingMenu在android studio中的使用
南尘:每天进步一点点! 前面讲了官方的侧滑菜单DrawerLayout的使用,其实早在官方没有推出这个之前,就有很多第三方的jar包如SlidingMenu等,感谢开源的力量. SlidingMenu ...
- Android侧滑菜单代码实现
前两天学习了hyman老师讲的Android侧滑菜单的实现,经过自己的整理分享出来给大家学习一下 现在很多APP都有菜单侧滑的功能,本篇文章主要讲解使用自定义的HorizontalScrollView ...
- Xamarin.Android中使用ResideMenu实现侧滑菜单
上次使用Xamarin.Android实现了一个比较常用的功能PullToRefresh,详情见:Xamarin. Android实现下拉刷新功能 这次将实现另外一个手机App中比较常用的功能:侧滑菜 ...
- Android带侧滑菜单和ToolBar的BaseActivity
写Android的时候,可能有多个界面.在风格统一的软件中,写Activity时会有很多重复.例如我所在软工课程小组的项目:Github链接 ,里面的TaskListActivity和TeacherL ...
随机推荐
- 2016.9.1 JavaScript入门之五
1.数据类型:对象:也可以被认为是一个键/值存储,像一个字典.可以取代switch{case:case:}或者if else 例如: function phoneticLookup(val) { va ...
- iOS10 UI教程视图的几何形状
iOS10 UI教程视图的几何形状 视图属性中的一部分属性可以让定义的视图绘制在屏幕上.在讲解这些属性前,我们首先将讲解,定义视图的几何形状所涉及到的结构类型.这些结构类型如下: CGPoint:它表 ...
- PHP 下载简历
下载简历:先生成html模版,然后在下载转化为word格式: 获取数据方法: 先获取数据,然后开启缓存,写入数据,关闭缓存:然后下载成word: /** * 下载简历--简单 * @author La ...
- MySql 的数据储存引擎
1.存储引擎是什么? Mysql中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术, ...
- js-新兴的API,最佳实践,离线应用于客户端存储
离线应用于客户端存储: 1.离线检测:online以及offline事件,都是在window对象上触发 navigator.online为true的时候是表示设备能够上网 2.使用一个描述文件(man ...
- 转:delphi 删除指定文件夹下所有文件
function TFtpContentThd.DeleteDirectory(NowPath: string): Boolean; var search: TSearchRec; ret: inte ...
- Docker中搭建Hadoop-2.6单机伪分布式集群
1 获取一个简单的Docker系统镜像,并建立一个容器. 1.1 这里我选择下载CentOS镜像 docker pull centos 1.2 通过docker tag命令将下载的CentOS镜像名称 ...
- JavaScript无缝滚动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- uva 11636
#include <cstdio> #include <cstring> #include <iostream> using namespace std; int ...
- hive0.12 rcfile gzip 测试
创建test_rc; 让后从老数据中插入test_rc中, select test_rc 中插入的数据,报如下错误: Failed with exception java.io.IOException ...