js带模糊效果的隐藏滑动侧边栏代码教程

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

<aside data-pushbar-id="left" class="pushbar from_left">
<div class="title"><span data-pushbar-close class="close push_right"></span> Left sidebar menu</div>
<ul class="menu">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>github</li>
</ul>
</aside>
<aside data-pushbar-id="right" class="pushbar from_right">
<div class="title"><span data-pushbar-close class="close push_right"></span> Right</div>
</aside>
<aside data-pushbar-id="top" class="pushbar from_top">
<div class="title"><span data-pushbar-close class="close push_right"></span> Top</div>
</aside>
<aside data-pushbar-id="bottom" class="pushbar from_bottom">
<div class="title"><span data-pushbar-close class="close push_right"></span> Bottom</div>
</aside>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>js带模糊效果的隐藏滑动侧边栏插件 <span>Tiny javascript plugin for creating sliding drawers in web apps</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.zzfriend.com/" title="蚂蚁开源社区" target="_blank"><span> 蚂蚁开源社区</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.zzfriend.com/edu/web/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="htmleaf-demo center">
<a href="#" data-pushbar-target="left">左侧侧边栏</a>
<a href="#" data-pushbar-target="right">右侧侧边栏</a>
<a href="#" data-pushbar-target="top">上部侧边栏</a>
<a href="#" data-pushbar-target="bottom">下部侧边栏</a>
</div>

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