简要教程
pushbar.js是一款带模糊效果的js隐藏滑动侧边栏插件。pushbar.js能制作上下左右四个方向的滑动侧边栏效果,并且在侧边栏菜单显示的时候,主页面会带有炫酷的模糊特效。
使用方法
在页面中引入pushbar.js和pushbar.css文件。
<link href="dist/css/pushbar.css" rel="stylesheet">
<script src="js/pushbar.js"></script>
HTML结构
该js隐藏滑动侧边栏菜单的HTML结构如下:
<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>
初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化pushbar.js插件。
var pushbar = new Pushbar({
blur:true,
overlay:true,
});
配置参数
该js隐藏滑动侧边栏菜单的可用配置参数如下: