使用 CSS3 和 jQuery 製作的 Pie Menu

這是一個很漂亮的選單，按了中間的按鈕後會四散彈出選單。

外掛網址:
Pie Menu

首先照範例準備類似下面的html

view plaincopy to clipboardprint

1. <div id='outer_container' class="outer_container" >  
2.     <a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>  
3.     <ul class="menu_option">  
4.         <li><a href="#"><span>Item</span></a></li>  
5.         <li><a href="#"><span>Item</span></a></li>  
6.         <li><a href="#"><span>Item</span></a></li>  
7.         <li><a href="#"><span>Item</span></a></li>  
8.         <li><a href="#"><span>Item</span></a></li>  
9.     </ul>  
10. </div>          

然後使用plugin

view plaincopy to clipboardprint

1. $('#outer_container').PieMenu({   
2.         'starting_angel':0(Starting Angle in degree),   
3.         'angel_difference' : 90(Displacement angle in degree),   
4.         'radius':100 (circle radius in px),   
5. });   

Demo