Pushbar.js带模糊效果的隐藏滑动侧边栏插件

摘要：Pushbar.js是一个小巧的Javascript插件，它可以用于在Web应用程序中创建滑动侧边栏效果，还提供模糊效果，就像开关抽屉的效果。你可以完全定制效果，它不依赖任何第三方库，你可以使用它作为侧栏菜单或者操作选项滑出效果。

Pushbar.js是一个小巧的Javascript插件，它可以用于在Web应用程序中创建滑动侧边栏效果，还提供模糊效果，就像开关抽屉的效果。你可以完全定制效果，它不依赖任何第三方库，你可以使用它作为侧栏菜单或者操作选项滑出效果。

如何使用

1.引入文件

在页面中引入pushbar.js和pushbar.css文件。

<link href="dist/css/pushbar.css" rel="stylesheet">
<script src="js/pushbar.js"></script>

2.HTML结构

将要滑出的侧边栏部分.pushbar和主体部分.pushbar_main_content分开。

<div data-pushbar-id="mypushbar1" class="pushbar from_left">
      Push bar content 1

  <button data-pushbar-close>Close</button>
</div>

<div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
  Push bar content 2

  <button data-pushbar-close>Close</button>
</div>

<div class="pushbar_main_content">
  Main content of the page

  <button data-pushbar-target="mypushbar1">
  Open my pushbar 1
  </button>

  <button data-pushbar-target="mypushbar2">
  Open my pushbar 2
  </button>
</div>

Pushbar.js提供四个方向的滑出效果，左侧(from_left)、右侧(from_right)、头部(from_top)、底部(from_bottom)，只需修改侧边栏部分的样式就可。

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化pushbar.js插件。

var pushbar = new Pushbar({
    blur:true,
    overlay:true,
});

配置参数

Pushbar.js提供两个主要的选项配置，简单实用。

blur：是否在打开侧边栏时主页面带模糊效果。

overlay：是否在打开侧边栏时主页面带遮罩层。

更多有关Pushbar.js的使用请参考Pushbar.js在github上的地址：https://github.com/oncebot/pushbar.js

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6988