这里在原有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. asp.net 局域网中获取 client的机器名

    //获取客户端计算机名称 System.Net.IPAddress clientIP = System.Net.IPAddress.Parse(Request.UserHostAddress);//根 ...

  2. linux环境下获取真实的ip地址

    package inas.test; import java.net.Inet6Address; import java.net.InetAddress; import java.net.Networ ...

  3. 相对和绝对路径/cd命令/创建和删除目录mkdir/rmdir/rm命令

    2.6 相对和绝对路径 2.7 cd命令 2.8 创建和删除目录mkdir/rmdir 2.9 rm命令 绝对路径:从根开始的路径:文件所在的路径: 相对路径:相对于当前目录而言的路径:上一级或者下一 ...

  4. [mobile angular ui 1.2]桌面环境下如何自动隐藏左侧的sidebar？how to hide left sidebar on desktop browser by default?

    使用mobile angular ui 1.2开发,在默认情况下,桌面浏览器中sidebar-left是默认打开的,怎么才能在程序初始打开时关闭sidebar-left呢? 目前我找到的唯一可行办法就 ...

  5. MVC Controller向View传递数据

    ASP.NET MVC中,Controller向View传递数据的方式有一下6种 ViewData ViewBag PartialView TempData ViewModel Tuple 1.Vie ...

  6. Github上搭建个人博客记录

    1.注册,用户名一定要起好,别随便起. 2.登录后,新建一个仓库repositories.new一个. 命名为用户名.github.io.如果发现不一样进Settings修改,rename. 3.仓库 ...

  7. nginx: [emerg] getpwnam(“www”) failed错误

    linux 64系统中安装nginx时如果出现错误:nginx: [emerg] getpwnam(“www”) failed in ........解决方法1:      在nginx.conf中 ...

  8. Java利用数组随机抽取幸运观众

    编写程序,事先将所有观众姓名输入数组,然后获得数组元素的总数量,最后在数组元素中随机抽取元素的下标,根据抽取的下标获得幸运观众的姓名. 思路如下: 定义输入框的按键事件,使用KeyEvent类的get ...

  9. POJ 3258 River Hopscotch(二分法搜索)

    Description Every year the cows hold an event featuring a peculiar version of hopscotch that involve ...

  10. PHP压缩html网页代码原理(清除空格,换行符,制表符,注释标记)

    本博启用了一个叫wp super cache的页面压缩工具, 源代码没有去查看,不过原理很简单. 我们可以自己动手书写一个压缩脚本. 清除换行符,清除制表符,去掉注释标记 .它所起到的作用不可小视. ...