使用 CSS3 和 jQuery 製作的 Pie Menu

pie menu

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

外掛網址:
Pie Menu

首先照範例準備類似下面的html
  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
  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

留言