现在位置首页 / 前端开发 /正文

jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单

作者: IT小兵 | 2013年9月15日| 热度:℃ | 评论: |参与:

 相信很多用过 Path 的都对它的独特的旋转导航菜单有深刻的印象,

这个功能也被很多的 Web 开发者模仿。

今天分享的这款插件可以方便的在你的网站中加入和 Path 一样的旋转菜单,可以自定义效果。


  使用方法很简单,首先引入 jquery.js,jquery.wheelmenu.js 以及 wheelmenu.css,然后添加如下的 HTML 代码:

1
2
3
4
5
6
7
8
<a href="#wheel2" class="wheel-button ne">
<span>+</span>
</a>
<ul id="wheel2" class="wheel">
 <li class="item"><a href="#home">A</a></li>
 <li class="item"><a href="#home">B</a></li>
 ...
</ul>

  这里的一个 li 元素就是一个导航,可以根据需要添加多个。插件的调用代码如下:

1
2
3
4
5
6
$(".wheel-button").wheelmenu({
 trigger: "hover", // 触发事件,可以是: "click" 或者 "hover". 默认值: "click"
 animation: "fly", // 动画效果,可以是: "fade" 或者 "fly". 默认值: "fade"
 animationSpeed: "fast", // 动画速度,可以是: "instant", "fast", "medium", 或者 "slow". 默认值: "medium"
 angle: "all", // 菜单的显示角度,可以是: "all", "N", "NE", "E", "SE", "S", "SW", "W", "NW", 或者数组 [0, 360]. 默认值: "all" or [0, 360]
});

  角度的定义还可以使用 data-angle 属性给每个元素定义,示例:

1
2
3
4
5
6
7
8
<a href="#wheel2" class="wheel-button ne">
<span>+</span>
</a>
<ul id="wheel2" data-angle="NE" class="wheel">
 <li class="item"><a href="#home">A</a></li>
 <li class="item"><a href="#home">B</a></li>
 ...
</ul>

  如果使用这个方法的话,记得把全局的角度配置去掉:

1
2
3
4
5
$(".wheel-button").wheelmenu({
 trigger: "hover",
 animation: "fly",
 animationSpeed: "fast"
});


插件下载   效果演示

转发来自:IT分享

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询