2015年3月1日 星期日

jQuery - Rolling Rounded Menu

jQuery Rolling Rounded Menu需在<head></head>網頁標籤部份匯入以下js檔案：
  • jquery-2.1.0.min.js
  • jquery-css-transform.js
  • jquery-animate-css-rotate-scale.js
其程式如下所示：
 



...
並以JavaScript設定Hover, Expand與Collapse等動作：

...
接著以<div></div>網頁標籤設定Rolling Rounded Menu選項：
 
  
 
     
    
 
      
Help
 
      
 
        FAQ 
        On-line Help 
        Q & A 
      
 
    
 
  
 
  
 
     
    
 
      
Contact
 
      
 
        e-Mail 
        Web Site 
      
 
    
 
  
 
  
 
     
    
 
      
Image Gallery
 
      
 
        Athena 
        Squirrel 
      
 
    
 
  
 
  
 
     
    
 
      
Search
 
      
 
         
        Go 
      
 
    
 
  
 
  
 
     
    
 
      
Home
 
      
 
        Profile
【執行結果】

當以滑鼠移至Rolling Rounded Menu上方時，將以旋轉的方式顯示Rolling Rounded Menu：
Rolling Rounded Menu中的內容亦可為文字欄位，如下圖所示：
亦可為數個超連結，如下圖所示：
【參考資料】

[1] jQuery：http://jquery.com

© Chia-Hui Huang
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)