这里在原有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. c# 连接mysql配置config，不用装net connector

    <system.data> <DbProviderFactories> <remove invariant="MySql.Data.MySqlClient&qu ...

  2. dubbox 的各种管理和监管[转]

    dubbo官方自带了dubbo-admin及dubbo-simple/dubbo-monitor-simple二个子项目用于服务治理及服务监控. 一.dubbo-admin的部署 这个比较简单,编译打 ...

  3. u3d DontDestroyOnLoad多场景问题

    using UnityEngine; using System.Collections; public class DontDel : MonoBehaviour { public GameObjec ...

  4. 条理清晰的搭建SSH环境之整合Struts和Spring

    上文说到搭建SSH环境所需三大框架的jar包,本篇博客将通过修改配置文件整合Struts和Spring,下篇博客整合Hibernate和Spring即可完成环境搭建. 1.声明bean,新建TestA ...

  5. 【WP8】自定义配置存储类

    之前在WP7升级到WP8的时候遇到配置不兼容的问题 情景:之前只有一个WP7版本,现在需要发布WP8版本,让用户可以从原来的WP7版本升级到WP8版本 一般情况下从WP7升级到WP8没什么问题 但是在 ...

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

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

  7. npm install mongoose错误解决

    今天安装mongoose一直报错,上图 具体的错误记录: info it worked if it ends with ok verbose cli [ 'C:\\Program Files\\nod ...

  8. 8 云计算系列之Horizon的安装与虚拟机创建流程

    preface 在上一章节中,我们可以在无web管理界面上创建并启动虚拟机,虽然可以这么做,但是敲命令太繁琐,所以此时我们可以安装openstack web管理界面,通过web界面的图形化操作open ...

  9. SQLServer查看存储过程的方法

    使用 sp_helptext 查看存储过程的定义 在对象资源管理器中,连接到 数据库引擎实例,再展开该实例. 在工具栏上,单击“新建查询”. 在查询窗口中,输入下列语句.更改数据库名称和存储过程名称以 ...

  10. go fmt格式化----“占位符”

    https://studygolang.com/articles/2644 https://studygolang.com/static/pkgdoc/pkg/fmt.htm