查看: 920|回复: 2

[插件] js带模糊效果的隐藏滑动侧边栏代码

[复制链接]
发表于 2019-8-22 23:15:39 | 显示全部楼层 |阅读模式

js带模糊效果的隐藏滑动侧边栏插件

js带模糊效果的隐藏滑动侧边栏插件


简要教程

pushbar.js是一款带模糊效果的js隐藏滑动侧边栏插件。pushbar.js能制作上下左右四个方向的滑动侧边栏效果,并且在侧边栏菜单显示的时候,主页面会带有炫酷的模糊特效。

使用方法

在页面中引入pushbar.js和pushbar.css文件。
  1. <link href="dist/css/pushbar.css" rel="stylesheet">
  2. <script src="js/pushbar.js"></script>  
复制代码

HTML结构

该js隐藏滑动侧边栏菜单的HTML结构如下:

  1. <aside data-pushbar-id="left" class="pushbar from_left">
  2. <div class="title"><span data-pushbar-close class="close push_right"></span> Left sidebar menu</div>
  3. <ul class="menu">
  4. <li>Home</li>
  5. <li>Products</li>
  6. <li>About</li>
  7. <li>Contact</li>
  8. <li>github</li>
  9. </ul>
  10. </aside>
  11. <aside data-pushbar-id="right" class="pushbar from_right">
  12. <div class="title"><span data-pushbar-close class="close push_right"></span> Right</div>
  13. </aside>
  14. <aside data-pushbar-id="top" class="pushbar from_top">
  15. <div class="title"><span data-pushbar-close class="close push_right"></span> Top</div>
  16. </aside>
  17. <aside data-pushbar-id="bottom" class="pushbar from_bottom">
  18. <div class="title"><span data-pushbar-close class="close push_right"></span> Bottom</div>
  19. </aside>
  20. <div class="htmleaf-container">
  21. <header class="htmleaf-header">
  22. <h1>js带模糊效果的隐藏滑动侧边栏插件 <span>Tiny javascript plugin for creating sliding drawers in web apps</span></h1>
  23. <div class="htmleaf-links">
  24. <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.zzfriend.com/" title="蚂蚁开源社区" target="_blank"><span> 蚂蚁开源社区</span></a>
  25. <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.zzfriend.com/edu/web/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
  26. </div>
  27. </header>
  28. <div class="htmleaf-demo center">
  29. <a href="#" data-pushbar-target="left">左侧侧边栏</a>
  30. <a href="#" data-pushbar-target="right">右侧侧边栏</a>
  31. <a href="#" data-pushbar-target="top">上部侧边栏</a>
  32. <a href="#" data-pushbar-target="bottom">下部侧边栏</a>
  33. </div>
复制代码

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化pushbar.js插件。

  1. var pushbar = new Pushbar({
  2.     blur:true,
  3.     overlay:true,
  4. });
复制代码

配置参数

该js隐藏滑动侧边栏菜单的可用配置参数如下:

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

overlay:是否在打开侧边栏时主页面带遮罩层。

源码下载

游客,如果您要下载源码或者查看隐藏内容请回复



回复

使用道具 举报

发表于 2019-8-24 13:14:39 | 显示全部楼层
不错,下了使用。
回复 支持 反对

使用道具 举报

发表于 2019-9-6 15:52:31 | 显示全部楼层
下载源码下载源码下载源码下载源码下载源码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表