站长资源
全栈工程师站点

圆形导航菜单轮插件- jquery.wheelmenu.js

圆形导航菜单轮插件- jquery.wheelmenu.js -1

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

使用方法

首先引入 jquery.js,jquery.wheelmenu.js 以及 wheelmenu.css

<link rel="stylesheet" type="text/css" href="wheelmenu.css"/>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="jquery.wheelmenu.js"></script>

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.wheelmenu.js -2圆形导航菜单轮插件- jquery.wheelmenu.js -3


免费下载  在线演示  
×

站长资源极速下载通道: 圆形导航菜单轮插件- jquery.wheelmenu.js

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 圆形导航菜单轮插件- jquery.wheelmenu.js

评论 抢沙发

评论前必须登录!