MUI - 侧滑菜单

时间:2022-11-01 21:32:42

各大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 - 侧滑菜单的更多相关文章

  1. mui侧滑菜单&quot&semi;点击含有mui-action-menu类的控件&quot&semi;无法实现侧滑

    .mui-action-menu 标题栏 菜单按钮 指定href="#id"显示与隐藏侧滑菜单 html: <div class="mui-off-canvas-w ...

  2. 利用 MUI开发app, 如何实现侧滑菜单及其主体部分上下滑动

     利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验. ...

  3. Hbuilder开发HTML5 APP之侧滑菜单

    1.思路: 其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如: //plus ...

  4. SlidingMenu 侧滑菜单的用法

    很多APP都有侧滑菜单的功能,部分APP左右都是侧滑菜单~SlidingMenu 这个开源项目可以很好帮助我们实现侧滑功能,将侧滑菜单引入项目的方式很多中,先通过例子介绍各种引入方式,然后给大家展示个 ...

  5. Android之自定义侧滑菜单

    先来上图: 我们把主界面从左向右拉动,可以看到地下有一层菜单页,从透明渐渐变得不透明,从小渐渐变大,感觉上觉得菜单页是从屏幕外面被拉到屏幕中的.下面的代码实现这个DEMO: 首先是自定义控件Slidi ...

  6. 第三方侧滑菜单SlidingMenu在android studio中的使用

    南尘:每天进步一点点! 前面讲了官方的侧滑菜单DrawerLayout的使用,其实早在官方没有推出这个之前,就有很多第三方的jar包如SlidingMenu等,感谢开源的力量. SlidingMenu ...

  7. Android侧滑菜单代码实现

    前两天学习了hyman老师讲的Android侧滑菜单的实现,经过自己的整理分享出来给大家学习一下 现在很多APP都有菜单侧滑的功能,本篇文章主要讲解使用自定义的HorizontalScrollView ...

  8. Xamarin&period;Android中使用ResideMenu实现侧滑菜单

    上次使用Xamarin.Android实现了一个比较常用的功能PullToRefresh,详情见:Xamarin. Android实现下拉刷新功能 这次将实现另外一个手机App中比较常用的功能:侧滑菜 ...

  9. Android带侧滑菜单和ToolBar的BaseActivity

    写Android的时候,可能有多个界面.在风格统一的软件中,写Activity时会有很多重复.例如我所在软工课程小组的项目:Github链接 ,里面的TaskListActivity和TeacherL ...

随机推荐

  1. 特定IP访问远程桌面

    1. 新建IP安全策略 (远程端口没有修改情况下的设置) WIN+R打开运行对话框,输入“gpedit.msc”进入组策略编辑器. 依次打开:本地计算机策略--计算机配置--Windows设置--安全 ...

  2. 【Python】&lbrack;面向对象高级编程&rsqb; 多成继承,定制类,使用枚举

    1.多成继承 class SmallDog(Animal,Dog) pass MixIn就是一种常见的设计. 2.定制类类似__slots__这种形如 __xxx__ 的变量或者函数名,在python ...

  3. JS限制input输入的为数字并且有小数的时候最多保留两位小数

    JS限制input用户输入的为数字并且有小数的时候最多保留两位小数,代码如下: html部分: <input type="number" onkeypress="r ...

  4. Ngrok远程桌面及ssh配置

    上一篇Ngrok 内网穿透利器 使用教程我们讲到Ngrok的基本使用教程,这篇描述一下Ngrok的远程桌面及ssh配置 Step 1 修改配置文件ngrok.cfg server_addr: &quo ...

  5. 通过Navicat for MySQL远程连接的时候报错mysql 1130的解决方法

    在用本地的navicat连接服务器的mysql数据库时候出现下面的问题: 解决的方法: 解决方法: 1.改表法.可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhos ...

  6. android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配注意事

    1.1 手机常见分辨率: 4:3VGA     640*480 (Video Graphics Array)QVGA  320*240 (Quarter VGA)HVGA  480*320 (Half ...

  7. Oracle-操作

    登录PL_SQL,输入用户名sys 密码 安装时输入的密码,选择 sysdba 打开plsqldev.exe所在目录下的PlugIns文件夹,如果没有请从其它地方拷入 打开运行命令窗口,输入命令 re ...

  8. eclipse下如何使用Hibernate反转工程生与数据库对应的实体类和映射文件(以MySQL为例)

    首先需要为eclipse添加对Hibernate的支持(也就是下载的Hibernate中的jar包),下载方法另查,这里不多做阐述. 想要使用反转工程,首先要下载Hibernate反转工程的插件Jbo ...

  9. 自定义Windows右击菜单调用Winform程序

    U9_Git中ignore文件处理 背景 U9代码中有许多自动生成的文件,不需要上传Git必须BE Entity中的.target文件 .bak 文件 Enum.cs结尾的文件,还有许多 extand ...

  10. bootstrap 在线设计工具layout IT

    Layoutit! bootstrap 可视化布局BETA