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

最新推荐文章于 2021-06-08 22:10:36 发布
最新推荐文章于 2021-06-08 22:10:36 发布
阅读量3.3k 收藏 1
点赞数 1
分类专栏： 移动端插件 文章标签： 触摸滑出
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cddcj/article/details/52682265
版权


( 类似手机QQ左触摸滑动，出现个人设置等信息。)


简介

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


兼容


  • Chrome（iOS、Android、PC）

  • Firefox（Android、PC）

  • Safari（iOS、Android、PC）

  • Opera（PC）

  • IE 10+（PC）



使用方法

1、引入文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/0.1.9/slideout.min.js"></script>


 也可以使用包管理器安装：

$ npm install slideout
$ spm install slideout
$ bower install slideout.js
$ component install mango/slideout

2、如何使用

1
2
3
4
5
6
7
8
9
10
11
<nav id="menu">
   <header>
     <h2>Menu</h2>
   </header>
</nav>
 
<main id="panel">
   <header>
     <h2>Panel</h2>
   </header>
</main>

然后在你的 .css 文件中为 Slideout 添加样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
     width: 100%;
     height: 100%;
}
.slideout-menu {
     position: fixed;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     z-index: 0;
     width: 256px;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     display: none;
}
.slideout-panel {
     position:relative;
     z-index: 1;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
     overflow: hidden;
}
.slideout-open .slideout-menu {
     display: block;
}

然后引入 Slideout.js 并创建一个实例

1
2
3
4
5
6
7
8
9
<script src="dist/slideout.min.js"></script>
<script>
   var slideout = new Slideout({
     'panel': document.getElementById('panel'),
     'menu': document.getElementById('menu'),
     'padding': 256,
     'tolerance': 70
   });
</script>

完整示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html]
<html]
   <head]
     <meta charset="utf-8">
     [title]Slideout Demo[/title>
     [meta http-equiv="cleartype" content="on">
     [meta name="MobileOptimized" content="320">
     [meta name="HandheldFriendly" content="True">
     [meta name="apple-mobile-web-app-capable" content="yes">
     [meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     [style]
       body {
         width: 100%;
         height: 100%;
       }
 
       .slideout-menu {
         position: fixed;
         left: 0;
         top: 0;
         bottom: 0;
         right: 0;
         z-index: 0;
         width: 256px;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         display: none;
       }
 
       .slideout-panel {
         position:relative;
         z-index: 1;
       }
 
       .slideout-open,
       .slideout-open body,
       .slideout-open .slideout-panel {
         overflow: hidden;
       }
 
       .slideout-open .slideout-menu {
         display: block;
       }
     [/style]
   [/head]
   [body]
 
     [nav id="menu"]
       [h2]Menu[/h2]
     [/nav]
 
     [main id="panel"]
       [header]
         [button]?[/button]
         [h2]Panel[/h2]
       [/header]
     [/main]
 
     [script src="dist/slideout.min.js"][/script]
     [script]
       var slideout = new Slideout({
         'panel': document.getElementById('panel'),
         'menu': document.getElementById('menu'),
         'padding': 256,
         'tolerance': 70
       });
 
       // Toggle button
       document.querySelector('.toggle-button').addEventListener('click', function() {
         slideout.toggle();
       });
     [/script]
 
   [/body]
[/html]

参数


  • Slideout(options)

    创建一个新的 Slideout 实例所要用到的选项

    • options (对象) - 一个使用自定义选项的 Slideout 实例。

    • options.panel (HTML 元素) - 程序中包含 .slideout-panel 的 DOM 元素。

    • options.menu (HTML 元素) - 程序中包含 .slideout-menu 的 DOM 元素。

    • [options.duration] (数字) - 打开/关闭 slideout 的时间（毫秒）。默认：300

    • [options.fx] (字符串) - 开启和关闭 slideout 时的 CSS 动画效果。默认：ease

    • [options.padding] (数字) - 默认：256

    • [options.tolerance] (数字) - 默认：70

    • [options.touch] (布尔值) - 设置此项为 false 可以禁用 Slideout 的触摸事件。默认：true

    • [options.side] (字符串) - 设置 slideout 从左侧或右侧打开 (left 或 right)。默认：left

    1
    2
    3
    4
    5
    6
    var slideout = new Slideout({
    'panel': document.getElementById('main'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
    });

    Slideout.open();
    打开 slideout 菜单。触发 beforeopen 和 open 事件。

    1
    slideout.open();

    Slideout.close();
    关闭 slideout 菜单。触发 beforeclose 和 close 事件。

    1
    slideout.close();

    Slideout.toggle();
    打开/关闭 slideout 菜单。

    1
    slideout.toggle();

    Slideout.isOpen();
    当 slideout 处于打开状态时返回 true，当处于关闭状态时返回 false。

    1
    slideout.isOpen(); // true or false

    Slideout.destroy();
    清理其他的 slideout 实例使其可以在同一区域再次创建。

    1
    slideout.destroy();

    Slideout.enableTouch();
    开启通过触摸事件打开 slideout。

    1
    slideout.enableTouch();

    Slideout.disableTouch();
    禁止通过触摸事件打开 slideout。

    1
    slideout.disableTouch();

    Slideout.on(event, listener);

    1
    slideout.on('open', function() { ... });

    Slideout.once(event, listener);

    1
    slideout.once('open', function() { ... });

    Slideout.off(event, listener);

    1
    slideout.off('open', listener);

    Slideout.emit(event, ...data);

    1
    slideout.emit('open');

    事件

    一个 Slideout 实例可以触发以下事件：

    • beforeclose

    • close

    • beforeopen

    • open

    • translate

    只有当通过触摸事件将它打开/关闭时，slideout 会触发 translate 事件。

    1
    2
    3
    slideout.on('translate', function(translated) {
         console.log(translated); // 120 in px
    });

    FAQ

    如何添加一个切换按钮

    1
    2
    3
    4
    5
    6
    7
    8
    // vanilla js
    document.querySelector('.toggle-button').addEventListener('click', function() {
         slideout.toggle();
    });
    // jQuery
    $('.toggle-button').on('click', function() {
         slideout.toggle();
    });

    如何从右侧打开 slideout

    你应该为 .slideout-menu 类设置 left: auto。

    1
    2
    3
    .slideout-menu {
         left: auto;
    }

    然后，设置 side 选项的值为 right。

    1
    2
    3
    4
    5
    var slideout = new Slideout({
         'panel': document.getElementById('content'),
         'menu': document.getElementById('menu'),
         'side': 'right'
    });


cc蒲公英
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
滚动式菜单栏滚动插件Slideout.js.zip
07-19
Slideout 是一个移动 web 应用程序上的触屏式导航菜单栏的滚动插件。易于自定义，标记，具有简单的本机滚动效果。定制方便，使用 CSS 转换可以具有一些很酷的效果，让你有更多的选择。 标签：Slideout 分享 window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": [], "bdPic": "", "bdStyle": "1", "bdSize": "24" }, "share": {} }; with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' ~(-new Date() / 36e5)];\r\n \r\n \r\n \r\n \r\n \u8f6f\u4ef6\u9996\u9875\r\n \u8f6f\u4ef6\u4e0b\u8f7d\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\nwindow.changyan.api.config({\r\nappid: 'cysXjLKDf', conf: 'prod_33c27aefa42004c9b2c12a759c851039' });
Slideout.js触摸滑出式的导航菜单
08-21
Slideout.js是一款轻量级的JavaScript库，专为创建触摸友好的滑出式导航菜单而设计。这款库在移动设备和桌面环境中都能提供流畅、直观的用户体验，是开发者构建响应式网站时的理想选择。它的核心功能是允许用户通过...
Slideout.js – 触摸滑出式 Web App 导航菜单
weixin_33704591的博客
07-31 62
详细内容请点击 Slideout.js 是为您的移动Web应用开发的触摸滑出式的导航菜单。它没有依赖，自由搭配简单的标记，支持原生的滚动，您可以轻松地定制它。它支持不同的CSS3转换和过渡。最重要的是，它只是4KB 。 在线演示 源码下载 学习来源：作者：山边小溪出处：jizhula.com 记住啦：）欢迎任何形式的转载，但请务必注明出处...
html滑动按钮源代码,js实现仿APP触摸滑动菜单Slideout.js
weixin_35849711的博客
06-08 228
Slideout.js是使用js实现仿APP触摸滑动菜单,实现类似本地化APP运用效果，支持树型格式化菜单，本地化滚动，自定义样式，CSS3动画切换效果。 浏览器兼容性： Chrome (IOS, Android, desktop) Firefox (Android, desktop) Safari (IOS, Android, desktop) Opera (desktop) IE 10+ (d...
Slideout.js – 滑出式 Web App 导航菜单
Shenya的博客
04-30 2499
Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单。它没有依赖，自由搭配简单的标记，支持原生的滚动，您可以轻松地定制它。它支持不同的 CSS3 转换和过渡。最重要的是，它只是4KB。 安装 Slideout 可用的cdnjs script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/0
基于slideout.js实现的移动端侧边栏滑动特效
weixin_34409822的博客
11-28 98
HTML5现在本领太大了，PC端已经无法满足它的胃口了，它将强势攻入移动端，所以移动端中各种特效也得基于HTML5实现，看看我们将要介绍的slideout.js，能帮我们实现怎么样的侧边栏滑动特效呢~~ 先看下运行效果：     一、准备资料 只需要准备slideout.js库即可： https://github.com/Mango/slideout/blob/master/dist/slid...
Slideout.js:移动网络应用的触摸滑出式导航菜单-开源
07-18
在您的 Web 应用程序中添加 Slideout.js 样式 (index.css)。 然后您只需包含 Slideout.js，创建一个带有一些选项的新实例并调用切换方法。 支持 Chrome（IOS、Android、桌面）、Firefox（Android、桌面）、Safari...
jquery实现Slide Out Navigation滑出式菜单效果代码
10-23
本文将详细讲解如何使用jQuery实现Slide Out Navigation滑出式菜单效果，以及涉及的关键技术和实现步骤。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画等功能。在实现滑出式菜单时，...
基于slideout.js实现移动端侧边栏滑动特效
10-21
主要为大家详细介绍了基于slideout.js实现移动端侧边栏滑动特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
左侧滑动侧边栏 slideout.js 简单
林中明月间丶
04-12 676
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slideout Demo</title> <meta http-equiv="cleartype" content="on"> <...
slidermenu
06-13
这是在开源代码打基础上修改过代码，实现打两个侧边菜单，切换的时候界面缩放。
slidemenue
03-24
使用这个可以实现类似QQ的那种侧滑删除，如有误需稍加仔细一点
使用Slideout.js开发移动Web应用导航栏菜单
weixin_33963189的博客
07-03 130
2019独角兽企业重金招聘Python工程师标准>>> ...
android侧滑菜单slid,移动端高仿APP侧滑导航控件Slideout.js_蓝戒的博客
weixin_32411919的博客
05-26 193
Slideout.js简介Slideout.js是一个Web上的可触控的导航栏菜单。查看Demo(在你的移动设备上或在你的浏览器上模拟触摸)安装可以直接引入 cdnjs 上的 .js 文件：也可以使用包管理器安装：$ npm install slideout$ spm install slideout$ bower install slideout.js$ component install ma...
Slideout.js触摸滑出式 Web App 导航菜单调用方法
fuguotao1的专栏
07-01 2077
https://github.com/mango/slideout/releases/ 1. First of all, you'll need to have a menu ("#menu") and a main content ("#panel") into your body. nav id="menu"> header> h2>Menuh2> header>
slideout
weixin_33896726的博客
12-13 120
这里在原有slideout.js增加了shade的遮罩功能 核心： 1，此插件的使用需要配合dom来用； <!-- 左边 --> <nav id="menu" class="menu"> <a href="#" target="_blank"> <header class="menu-header"> &lt...
js 点击侧边栏展示内容_Sideout.JS 轻量级侧边栏jQuery插件
weixin_39870092的博客
01-13 167
Sideout.JS 轻量级侧边栏jQuery插件三月 9, 2015评论Sponsor在兼容移动手机的网站中，它的导航设计一般使用了侧边栏方式，就像某些APP应用一样，导航从侧边滑出。其实之前我们也分享过《好用的侧边栏菜单/面板jQuery插件》以及《15个响应式设计的导航菜单jQuery插件》，里面有不少的相关菜单插件。今天和大家分享的是一个轻量的侧边栏jQuery插件：Sideout.JS，...
af.slidemenu.js
sunny_lv的专栏
08-18 1161
/** * Slide menu plugin for App Framework UI * @copyright Intel * simply include this plugin to allow sliding of your app to reveal the left and right hand menus. */ /* global af*/ /* g
swiper.js 滑块 向上滑动的距离
最新发布
01-07
根据引用内容，Swiper.js是一个用于实现滑块效果的JavaScript库。它提供了一种机制，当滑动滑块超过最上或最下的位置时触发的一种抵御机制。如果你想知道滑块向上滑动的距离，可以使用Swiper.js提供的回调函数来获取。具体步骤如下： 1. 首先，在你的HTML文件中引入Swiper.js库： ```html <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> ``` 2. 创建一个包含滑块的HTML元素： ```html <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> ``` 3. 初始化Swiper实例，并设置回调函数来获取滑块向上滑动的距离： ```javascript var swiper = new Swiper('.swiper-container', { direction: 'vertical', // 设置滑动方向为垂直 on: { slideChangeTransitionEnd: function () { var distance = this.getTranslate(); // 获取滑块向上滑动的距离 console.log('滑块向上滑动的距离：', distance); } } }); ``` 通过以上步骤，你可以使用Swiper.js库来实现滑块效果，并获取滑块向上滑动的距离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值