这里在原有slideout.js增加了shade的遮罩功能

核心：

1，此插件的使用需要配合dom来用；

<!-- 左边 -->

<nav id="menu" class="menu">

  <a href="#" target="_blank">

    <header class="menu-header">

      <span class="menu-header-title">个人中心</span>

    </header>

  </a>

  <section class="menu-section">

    <h3 class="menu-section-title">姓名</h3>

    <ul class="menu-section-list">

      <li><a href="#" target="_blank">我的订单</a></li>

      <li><a href="#" target="_blank">我的地址</a></li>

      <li><a href="#" target="_blank">设置</a></li>

      <li><a href="#" target="_blank">退出</a></li>

    </ul>

  </section>

</nav>

<!-- 右边 -->

<main id="main" class="panel">

    <!-- 遮罩 -->

    <div class="shade" id="shade"></div>

    <!-- 按钮 -->

    <button class="btn-hamburger js-slideout-toggle"></button>

</main>

2，使用环境中，判断用户的登录状态；

3，源码中修改的地方 注意close(),与open()事件；

完整源码：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>移动手机的侧边栏滑动</title>

<link rel="stylesheet" href="slideout.css">

<link rel="stylesheet" href="common.css">

</head>

<body>

<!-- 左边 -->

<nav id="menu" class="menu">

  <a href="#" target="_blank">

    <header class="menu-header">

      <span class="menu-header-title">个人中心</span>

    </header>

  </a>

  <section class="menu-section">

    <h3 class="menu-section-title">姓名</h3>

    <ul class="menu-section-list">

      <li><a href="#" target="_blank">我的订单</a></li>

      <li><a href="#" target="_blank">我的地址</a></li>

      <li><a href="#" target="_blank">设置</a></li>

      <li><a href="#" target="_blank">退出</a></li>

    </ul>

  </section>

</nav>

<!-- 右边 -->

<main id="main" class="panel">

    <!-- 遮罩 -->

    <div class="shade" id="shade"></div>

    <article>

        <ul class="header flex flex-row flex-align-center">

            <li style="margin-right:20px;width:26px;">

                <button class="btn-hamburger" id="toggle-btn"></button>

            </li>

            <li class="flex-1 header-title">

                名称

            </li>

            <li style="width:22px;padding:5px 15px;">

                <img class="listtype" src="https://s1.ax1x.com/2017/12/13/bjnyj.png" alt="">

            </li>

        </ul>

    </article>

</main>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script type="text/javascript" src="slideout.js"></script>

<script type="text/javascript">

    var flag = 1 //;是否登录；1：登录，0:未登录

    if(flag == 1){

        $("#toggle-btn").addClass("js-slideout-toggle")

        if($("#toggle-btn").hasClass("js-slideout-toggle")){

        // 左边菜单滑动-start

            var slideout = new Slideout({

                'panel': document.getElementById('main'),

                'menu': document.getElementById('menu'),

                'padding': 256,

                'tolerance': 70

            });

            document.querySelector('.js-slideout-toggle').addEventListener('click', function() {

                slideout.toggle();

            });

            // 点击遮罩，收回侧边栏

            document.querySelector('.shade').addEventListener('click', function() {

                slideout.toggle();

            });

            document.querySelector('.menu').addEventListener('click', function(eve) {

                if (eve.target.nodeName === 'A') { slideout.close(); }

            });

        // 左边菜单滑动-end

        }

    }else{

        $("#toggle-btn").removeClass("js-slideout-toggle");

        $("#toggle-btn").click(function () {

            alert("请登录");

        })

    }

</script>

</body>

</html>

预览地址：

https://besswang.github.io/slideout-test/index.html

slideout的更多相关文章

  1. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  2. 基于slideout.js实现的移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...

  3. iphone Dev 开发实例10:How To Add a Slide-out Sidebar Menu in Your Apps

    Creating the Xcode Project With a basic idea about what we’ll build, let’s move on. You can create t ...

  4. Slideout吐槽

    前言: 今天有点事,只尝试做一个侧边栏.SlideOut一个侧边栏,对着github,ReadMe看,并尝试着写了.还不错,关键是当与bootstrap一起时,什么效果都没了, 这是什么情况,明天想再 ...

  5. Slide-out Sidebar Menu

    IOS学习之路十(仿人人滑动菜单Slide-out Sidebar Menu) 2013-09-03 22:13 by lixingle, 270 阅读, 0 评论, 收藏, 编辑 最近滑动菜单比较流 ...

  6. IOS学习之路十（仿人人滑动菜单Slide-out Sidebar Menu）

    最近滑动菜单比较流行,像facebook和人人等都在使用滑动菜单,今天做了一个小demo大体效果如下: 这次用了一个开源的项目ECSlidingViewController这个也是一个挺著名的托管在G ...

  7. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  8. weui tabbar 切换

    Html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  9. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

随机推荐

  1. xshell使用xftp传输文件 使用pure-ftpd搭建ftp服务

    xshell使用xftp传输文件 下载xftp5 https://www.baidu.com/link?url=8rtxgX3JRIbUFO1Samzv5aXhfwRG7Cf8i4vi573QexoH ...

  2. OpenGL ES学习资料总结

    从今年春节后开始学习OpenGL ES,发现网上资料很有限,而且良莠不齐,所以整理了一下我学习时用到的资料和一些心得. 1. OpenGL ES1.x参考资料 把NEHE的教程移植到了Android上 ...

  3. UNIX环境编程学习笔记（15）——进程管理之进程终止

    lienhua342014-10-02 1 进程的终止方式 进程的终止方式有 8 种,其中 5 种为正常终止,它们是 1. 从 main 返回. 2. 调用 exit. 3. 调用_exit 或_Ex ...

  4. UNIX环境编程学习笔记（4）——文件I/O之dup复制文件描述符

    lienhua342014-08-23 UNIX 提供了两个函数 dup 和 dup2 用于复制一个现存的文件描述符. #include <unistd.h> int dup(int fi ...

  5. npm安装包卡住不动的解决

    最近诸事不顺,今天更新/安装nodejs各种包也全都卡在各个环节,用ie设了全局代理貌似也没什么改观,于是到网上找找有没有国内镜像站,倒是发现了cnpmjs.org这个网站被推荐比较多,看他们主页,他 ...

  6. koa2使用注意点总结

    post请求,ajax传入的参数获取的时候为ctx.request.body get请求,ajax传入参数获取的时候为ctx.request.query.参数名 koa-csrf可以设置什么请求的时候 ...

  7. Global.asax的Application_BeginRequest实现url重写无后缀的代码

    本文为大家详细介绍下利用Global.asax的Application_BeginRequest 实现url重写其无后缀,具体核心代码如下,有需求的朋友可以参考下,希望对大家有所帮助 利用Global ...

  8. php解析mpp文件中的前置任务

    获取层级的project任务  参考 启动javabridge java -jar JavaBridge.jar SERVLET_LOCAL:8089 1.读取mpp文件 $file_path = & ...

  9. MVC多语言设置 实战简洁版

    此方式可以通过更改进行更改进程语言设定,支持从系统获取默认的区域设定,支持自定义,自定义的方式可以为cookie,可为资料库获取,session等方式. 具体怎么设定就看个人需要了. 第一步: 添加资 ...

  10. Linux+Redis实战教程_day01_Linux系统上安装tomcat

    Linux系统上安装tomcat 安装tomcat 上传tomcat的安装文件 Alt+p 拖拽上传 创建tomcat的安装路径 mkdir -p /usr/local/tomcat 解压tomcat ...