I Love Programming: jQuery - Sliding Image Menu (1)

2015年3月1日星期日

jQuery - Sliding Image Menu (1)

jQuery Sliding Image Menu需在<head></head>網頁標籤部份匯入以下js檔案：

jquery-2.1.0.min.js
jquery.bgImageMenu.js
jquery.easing.js

其程式如下所示：

...

並以JavaScript設定預設Menu的背景圖片：

...

接著以<div></div>網頁標籤設定Sliding Image Menu選項：


  
    
      
        Home
        
          
            Welcome
            Activity
            Website
          
                    
      
      
        Profile
        
          
            Curriculum Vitae
            Research Interest
            Education
            Project
            Grant
            Membership
            Reviewer
            Conference Committee
            Conference Session Chair
            Invited Talk
            Training Certificate
          
                    
      
      
        Publication
        
          
            Journal Paper
            Conference Paper
            Technical Report
            Academic Book
            Text Book
            Article