这里在原有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. SpringMVC文件上传基础

    maven依赖 <!--文件上传所需--> <dependency> <groupId>commons-fileupload</groupId> < ...

  2. 非常酷的CSS3垂直下拉动画菜单

    昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...

  3. 没有公网的IP的用户有福了，即使您没有公网IP，我们要一样可以让您与ER对接，同时可远程访问

    EasyRadius从7.10起,开始向使用者平摊使用费用,即服务器托管费用.维护费用,向用户征收少量费用.即300元/年/1000用户,600元/年/无限制用户. 按比较高的费用1000用户计费,即 ...

  4. service citrix xcenserver health check service (xenserver healthcheck) failed to start verfy that you have sufficient privileges to srart system services

    citrix XcenServer版本:7.2 citrix Xcencenter版本:7.2 安装citrix Xcencenter的时候报错: service citrix xcenserver ...

  5. 非抢占式RCU实现(二)，解释：为什么 RCU_NEXT_SIZE 宏值是4？

    参考:2.6.34 一个很奇怪的问题. 没有查找到为什么 RCU_NEXT_SIZE的值为4的原因(包括Documentation),主要是在rcu_state中定义了一个四级的list,感到很有意思 ...

  6. Java、C#双语版HttpHelper类(解决网页抓取乱码问题)

    在做一些需要抓取网页的项目时,经常性的遇到乱码问题.最省事的做法是去需要抓取的网站看看具体是什么编码,然后采用正确的编码进行解码就OK了,不过总是一个个页面亲自去判断也不是个事儿,尤其是你需要大量抓取 ...

  7. mysql 用户权限操作

    https://www.cnblogs.com/SQL888/p/5748824.html http://blog.csdn.net/fafa211/article/details/2249217

  8. JQuery难点备忘

    1 jquery绑定事件如何传递参数 $("#btn").bind("click",{"id":"111"," ...

  9. Linux怎样创建FTP服务器--修改用户默认目录

    在创建FTP服务器之有先命令: ps -ef |grep vsftpd 查一下系统有没有安装vsftpd这个服务器,如果出现如下图所示的界面说明没有安装.     然后再执行:yum install ...

  10. C#实现新建文件并写入内容

    using System; using System.IO; namespace ConsoleApplication1 { class Program { static void Main(stri ...