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

　　相信很多用过 Path 的都对它的独特的旋转导航菜单有深刻的印象，这个功能也被很多的 Web 开发者模仿。今天分享的这款插件可以方便的在你的网站中加入和 Path 一样的旋转菜单，可以自定义效果。

您可能感兴趣的相关文章

• OverAPI.com – 史上最全开发人员在线速查手册
• HTML5 Maker – 在线轻松制作 HTML5 动画效果
• SlimerJS – Web开发人员可编写 JS 控制的浏览器
• Chance – 功能强大的 JavaScript 随机数生成类库
• Debuggex – 超好用的正则表达式可视化调试工具

 

 

 

 

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

<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 元素就是一个导航，可以根据需要添加多个。插件的调用代码如下：

$(".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 属性给每个元素定义，示例：

<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>

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

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

 

插件下载 　　效果演示

 

您可能感兴趣的相关文章

• Manifesto – HTML5 离线应用程序缓存校验工具
• Popline：很特别的浮动 HTML5 文本编辑器工具栏
• Bootstrap 3.0 正式发布，更好地支持移动端开发
• Zoom.js：一款效果非常独特的页面内容缩放插件
• Superhero：构建大型 JavaScript 应用程序的资源

 

本文链接：使用jQuery Wheel Menu实现漂亮的Path旋转菜单

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源