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

简要教程

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隐藏滑动侧边栏菜单的可用配置参数如下:

  • blur:是否在打开侧边栏时主页面带模糊效果。
  • overlay:是否在打开侧边栏时主页面带遮罩层。

原文发布于微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文发表时间:2019-08-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券