這是一款效果非常炫酷的jQuery環形按鈕菜單效果插件。該jQUery環形按鈕菜單插件在鼠標點擊或滑過中間的主導航按鈕時，菜單按一個圓形的路徑滑動展開，形成一個環形的大菜單，效果非常酷。
本經驗分享如何使用jQuery環形按鈕菜單效果插件。
工具/原料
筆記本電腦或是臺式機
互聯網
jQuery
jquery.wheelmenu.js
方法/步驟
要使用這個插件，首先需要在頁面中引入jQuery和jquery.wheelmenu.js，以及wheelmenu.css文件。
要確保wheel-button超鏈接中的href匹配你想要現實的環狀按鈕菜單列表，如下圖所示：
下面是環狀按鈕菜單的樣式：
.wheel-button {
position: relative;
}
.wheel {
margin: 0;
padding: 0;
list-style: none;
width: 200px; /* this will determine the diameter of the circle */
height: 200px; /* this will determine the diameter of the circle */
visibility: hidden;
position: relative;
display: none;
}
.wheel li {
overflow: hidden;
float:left;
}
.wheel li a {
display: block;
}
上面的樣式是環狀按鈕菜單插件必須的樣式。.wheel的寬度和高度確定環狀按鈕菜單的直徑有多大。按照你的需要調整它們。上面的其他部分樣式不能被改變。
Javascript部分代碼十分簡單。有3個參數你可以調整：animation、animationSpeed和angle。
$(".wheel-button").wheelmenu({
animation: "fly",
animationSpeed: "medium",
angle: “all”
});
（1）animation：你可以選擇“fade”或“fly”效果。你可以在第二種效果中看它們的區別。默認值是“fade”。
（2）animationSpeed：設置為“instant”，將立刻出現。其它選項還有：“fast”, “medium”, 或“slow”。默認值為“medium”。
（3）angle：你可以選擇以下一些預定義的值：all, N, NE, E, SE, S, SW, W, 和 NW。這些選項可以使你將環形按鈕菜單放置在頁面的任何地方，並防止菜單展開時溢出頁面。
例如：如果你希望菜單按鈕出現在頁面的北邊，你可以選擇“N”選項。如果你希望菜單按鈕出現在所有方向上，那麼使用“all”選項。
你甚至可以使用倆個值的數組來定義菜單出現的開始和結束位置。例如，你希望環形按鈕菜單隻顯示3/4個圓，你可以使用[0,270]來定義你的角度。
多按鈕支持
這個插件還允許你為每一個不同的菜單按鈕設置一個不同的角度值。看下面的例子：
+
+
..
同時不要忘記將data-angle從全局函數中移除。
JS代碼
$(".wheel-button").wheelmenu({
trigger: "hover",
animation: "fly"
});
注意：預定義的data屬性總是會覆蓋你設置的全局的參數。
案例1完整代碼如所示：
案例1運行效果如下圖所示：
案例2完整代碼如所示：
案例2運行效果如下圖所示：
注意事項
jQuery EasyUI插件依賴於JQuery，需要在easyui.min.js之前引入JQuery庫