轮菜单

所属分类:导航-其他导航

 49842  466  查看评论 (4)
分享到微信朋友圈
X
轮菜单 ie兼容

轮菜单是一个jQuery插件,可以帮您实现一个增加完全可定制的路径轮菜单按

使用步骤

要添加这个,只需在您的网站包括最新的jQuery库在这里找到一起到你的文档的<head> 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>

确保HREF的ID相匹配的UL

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

进一步定制

你可以申请有了jquery.wheelmenu.js,每个单独的元素用不同的角度,通过简单地增加一个数据角度到您的文档中的UL如下:

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

您也可以使用数组作为角代表的出发点和落脚点菜单就会出现在哪里。例如,使用阵列使菜单出现360度,你可以使用[0,360]作为一个角度。随意发挥与数字,以获得最佳的结果。


不要忘记删除的角度,从这里看到的全局选项:

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

现在,每个元素都会有自己的效果,而无需多次调用该函数。

相关插件-其他导航

纯CSS3多级环形导航菜单(原创)

使用纯css3开发的多级环绕导航菜单,扩展方便。
  其他导航
 52977  523

jQuery仿微信自定义菜单

jQuery仿微信自定义菜单全屏自适应手机底部弹出菜单
  其他导航
 34020  378

圆形的动画导航用CSS和jQuery

一个实验性的全屏导航、动画使用CSS和jQuery,扩大在一个循环。 支持所有主流浏览器。
  其他导航
 36158  399

纯CSS3扇形导航

纯CSS3打造动感漂亮的扇形菜单
  其他导航
 44483  558

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    sixfish 0
    2015/7/18 14:07:54
    皮囊 0
    2014/9/3 10:14:05
    JQ剑圣 0
    2014/5/22 9:43:00
    JQ剑圣 0
    2013/12/8 17:49:00
    超霸气的一个滚轮菜单 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复