一个基于jQuery+CSS打造的多级菜单,动感效果

查看效果

下载地址

一个jQuery+CSS打造的多级菜单,动感效果

jQuery+CSS 打造的多级动感展开菜单,颜色和动画搭配都很漂亮,动画平滑,支持四级展开,相信已经够你用了,http://www.jscss8.com/载图看不出动画效果,这是从WordPress博客程序里分享出来的。

前台部分代码

 

代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > JavaScript Dropdown Menu Demo by http://www.co de fans.net </ title >
< link  rel ="stylesheet"  href ="style.css"  type ="text/css"   />
< script  type ="text/javascript"  src ="script.js" ></ script >
</ head >
< body >
< ul  class ="menu"  id ="menu" >
    
< li >< href ="http://www.jscss8.com"  class ="menulink" > Dropdown One </ a >
        
< ul >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
            
< li >
                
< href ="http://www.jscss8.com"  class ="sub" > Navigation Item 2 </ a >
                
< ul >
                    
< li  class ="topline" >< href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 3 </ a ></ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 5 </ a ></ li >
                
</ ul >
            
</ li >
            
< li >
                
< href ="http://www.jscss8.com"  class ="sub" > Navigation Item 3 </ a >
                
< ul >
                    
< li  class ="topline" >< href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                    
< li >
                        
< href ="http://www.jscss8.com"  class ="sub" > Navigation Item 3 </ a >
                        
< ul >
                            
< li  class ="topline" >< href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                            
< li >< href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                            
< li >< href ="http://www.jscss8.com" > Navigation Item 3 </ a ></ li >
                            
< li >< href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
                            
< li >< href ="http://www.jscss8.com" > Navigation Item 5 </ a ></ li >
                            
< li >< href ="http://www.jscss8.com" > Navigation Item 6 </ a ></ li >
                        
</ ul >
                    
</ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
                
</ ul >
            
</ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 5 </ a ></ li >
        
</ ul >
    
</ li >
    
< li >< href ="http://www.jscss8.com"  class ="menulink" > Non-Dropdown </ a ></ li >
    
< li >
        
< href ="http://www.jscss8.com"  class ="menulink" > Dropdown Two </ a >
        
< ul >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
            
< li >
                
< href ="http://www.jscss8.com"  class ="sub" > Navigation Item 2 </ a >
                
< ul >
                    
< li  class ="topline" >< href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 3 </ a ></ li >
                
</ ul >
            
</ li >
        
</ ul >
    
</ li >
    
< li >
        
< href ="http://www.jscss8.com"  class ="menulink" > Dropdown Three </ a >
        
< ul >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 3 </ a ></ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 5 </ a ></ li >
            
< li >
                
< href ="http://www.jscss8.com"  class ="sub" > Navigation Item 6 </ a >
                
< ul >
                    
< li  class ="topline" >< href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                    
< li >< href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                
</ ul >
            
</ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 7 </ a ></ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 8 </ a ></ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 9 </ a ></ li >
            
< li >< href ="http://www.jscss8.com" > Navigation Item 10 </ a ></ li >
        
</ ul >
    
</ li >
</ ul >
< script  type ="text/javascript" >  
    
var  menu = new  menu.dd( " menu " );
    menu.init(
" menu " , " menuhover " );
</ script >
</ body >

</ html >

 

 

你可能感兴趣的:(jquery)