相信很多用過 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"
});
您可能感興趣的相關文章