Pushbar.js 介绍
Pushbar.js是 一个 小巧的JavaScript 插件 ，它可以用于在Web应用程序中创建滑动 侧边栏 效果 ，还提供模糊 效果 ，就像开关抽屉的 效果 。你可以完全定制 效果 ，它不依赖任何第三方库，你可以使用它作为侧栏 菜单 或者操作选项滑出 效果 。
1.引入 文件在 页面 中引入pushbar.js和pushbar.css 文件 。
<link href=" dis t/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_b ott om">
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_b ott om)，只需 修改 侧边栏 部分的样式就可。
初始化 插件在 页面 DOM元素加载完毕之后，通过下面的 方法 来初始化pushbar.js 插件 。
var pushbar = new Pushbar({
blur:true,
overlay:true,
});
配置参数Pushbar.js提供两个主要的选项配置，简单实用。
blur：是否在打开 侧边栏 时主 页面 带模糊 效果 。
overlay：是否在打开 侧边栏 时主 页面 带遮罩层。?
网站地址 : https://oncebot.github.io/pushbar.js/
GitHub: https://github.com/oncebot/pushbar.js
网站描述: 一个 用于在Web应用中创建滑动抽屉的微型javascript 插件
Pushbar.js官方网站
官方网站： https://oncebot.github.io/pushbar.js/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。