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分开。
<p data-pushbar-id="mypushbar1" class="pushbar from_left"> Push bar content 1 <button data-pushbar-close>Close</button></p><p data-pushbar-id="mypushbar2" class="pushbar from_bottom"> Push bar content 2 <button data-pushbar-close>Close</button></p><p 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></p>
Pushbar.js提供四个方向的滑出效果，左侧(from_left)、右侧(from_right)、头部(from_top)、底部(from_bottom)，只需修改侧边栏部分class="pushbar from_left"的样式就可。
初始化插件
在页面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
以上就上有关带模糊效果的隐藏滑动侧边栏插件-Pushbar.js的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。