HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单

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

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



使用方法很简单,首先引入 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"

});


插件下载   效果演示

【jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单】相关文章

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

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

3. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果

4. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果

5. When Earth Needs a Hero

6. 基于Threejs的jQuery 3d图片旋转木马特效插件

7. jQuery.mmenu – 用于移动 Web 项目的光滑菜单

8. jQuery.mmenu – 用于移动 Web 项目的光滑菜单

9. jQuery漂亮的渐变选择器生成CSS

10. 推荐12个漂亮的CSS3按钮实现方案

本文来源:https://www.51html5.com/a3366.html

点击展开全部

﹝jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单﹞相关内容

「jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单」相关专题

其它栏目

也许您还喜欢