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

最新推荐文章于 2021-06-09 19:14:11 发布

转载最新推荐文章于 2021-06-09 19:14:11 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/s7mmersupport/archive/2010/07/02/1769636.html

文章标签：

#javascript #xhtml #php #ViewUI

使用jQuery和CSS实现的多级菜单，支持四级展开，动画平滑，颜色和动画搭配美观。该菜单来源于WordPress博客程序，代码示例中包含了HTML结构及初始化脚本。

查看效果

下载地址

一个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 >< a href ="http://www.jscss8.com" class ="menulink" > Dropdown One </ a >
         < ul >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
             < li >
                 < a href ="http://www.jscss8.com" class ="sub" > Navigation Item 2 </ a >
                 < ul >
                     < li class ="topline" >< a href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 3 </ a ></ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 5 </ a ></ li >
                 </ ul >
             </ li >
             < li >
                 < a href ="http://www.jscss8.com" class ="sub" > Navigation Item 3 </ a >
                 < ul >
                     < li class ="topline" >< a href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                     < li >
                         < a href ="http://www.jscss8.com" class ="sub" > Navigation Item 3 </ a >
                         < ul >
                             < li class ="topline" >< a href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                             < li >< a href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                             < li >< a href ="http://www.jscss8.com" > Navigation Item 3 </ a ></ li >
                             < li >< a href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
                             < li >< a href ="http://www.jscss8.com" > Navigation Item 5 </ a ></ li >
                             < li >< a href ="http://www.jscss8.com" > Navigation Item 6 </ a ></ li >
                         </ ul >
                     </ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
                 </ ul >
             </ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 5 </ a ></ li >
         </ ul >
     </ li >
     < li >< a href ="http://www.jscss8.com" class ="menulink" > Non-Dropdown </ a ></ li >
     < li >
         < a href ="http://www.jscss8.com" class ="menulink" > Dropdown Two </ a >
         < ul >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
             < li >
                 < a href ="http://www.jscss8.com" class ="sub" > Navigation Item 2 </ a >
                 < ul >
                     < li class ="topline" >< a href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 3 </ a ></ li >
                 </ ul >
             </ li >
         </ ul >
     </ li >
     < li >
         < a href ="http://www.jscss8.com" class ="menulink" > Dropdown Three </ a >
         < ul >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 3 </ a ></ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 4 </ a ></ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 5 </ a ></ li >
             < li >
                 < a href ="http://www.jscss8.com" class ="sub" > Navigation Item 6 </ a >
                 < ul >
                     < li class ="topline" >< a href ="http://www.jscss8.com" > Navigation Item 1 </ a ></ li >
                     < li >< a href ="http://www.jscss8.com" > Navigation Item 2 </ a ></ li >
                 </ ul >
             </ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 7 </ a ></ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 8 </ a ></ li >
             < li >< a href ="http://www.jscss8.com" > Navigation Item 9 </ a ></ li >
             < li >< a 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 >

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/07/02/1769636.html