最近发文频率有些低，上周末去给遂遂他们搬家，累个半死，平时白天工作，晚上弄毕设或者休息，写文章的时间所剩无几，今天扒了下访问日志，发现jquery实现的ajaxfileupload一文最受欢迎，料想对jquery实现的菜单特效需求也不小，那就整理一篇吧，程序是我之前实现的，前几天还将click触发改成了mouseover，效果还不错，只是未能封装成插件，如果真的很实用，那到时候再整理吧，转入正题。
js爱好者们通常不太屑于flash的炫酷效果，声称js也能做到，在这方面也已经有了lightbox、fisheye等应用，而且js实现一般具备对搜索引擎更加友好，访问用户的下载字节数更少，可以复制其中的文字和链接等优势。本人也是如此，如果能用js实现，又有jquery等这样的优秀框架撑腰，为什么不呢？
菜单特效首先需要html和css代码的支持，实现本菜单的html内容结构和css代码如下：

下载: menu.txt
  1. <ul id="menu" style="width:600px; height:600px;">
  2.     <li class="firstMenu" lang="1.1"><a>菜单1.1</a></li>
  3.     <li class="secondMenu" lang="1.1">
  4.         <ul>
  5.             <li lang="1.1.1"><a href="#">STRORY BO</a></li>
  6.             <li lang="1.1.2"><a href="#">GIG TREE</a></li>
  7.         </ul>
  8.     </li>
  9.     <li class="thirdMenu" lang="1.1.1">
  10.         <ul>
  11.             <li class="secondMenu"><a href="#">SEA EHTIC</a> </li>
  12.             <li class="secondMenu"><a href="#">DGFASD DEA</a></li>
  13.             <li class="secondMenu"><a href="#">HEEALTH FUN</a></li>
  14.         </ul>
  15.     </li>
  16.     <li class="thirdMenu" lang="1.1.2">
  17.         <ul>
  18.             <li><a href="#">BEEF GUN</a></li>
  19.             <li><a href="#">FOR TIME</a></li>
  20.             <li><a href="#">MCDONDLAS</a></li>
  21.             <li><a href="#">MCDONDLAS</a></li>
  22.         </ul>
  23.     </li>
  24.     <li class="firstMenu" lang="1.2"><a href="#">| 菜单1.2</a></li>
  25.     <li class="secondMenu" lang="1.2">
  26.         <ul style="">
  27.             <li lang="1.2.1"><a href="#">三级菜单一</a></li>
  28.             <li lang="1.2.2"><a href="#">三级菜单二</a></li>
  29.             <li lang="1.2.3"><a href="#">级菜单三</a></li>
  30.         </ul>
  31.     </li>
  32.     <li class="thirdMenu" lang="1.2.1">
  33.         <ul style="">
  34.             <li><a href="#">菜单1.2.1.1</a></li>
  35.             <li><a href="#">菜单1.2.1.2</a></li>
  36.             <li><a href="#">菜单1.2.1.3</a></li>
  37.             <li><a href="#">菜单1.2.1.4</a></li>
  38.         </ul>
  39.     </li>
  40.     <li class="thirdMenu" lang="1.2.2">
  41.         <ul style="">
  42.             <li><a href="#">菜单1.2.2.1</a></li>
  43.             <li><a href="#">菜单1.2.2.2</a></li>
  44.             <li><a href="#">菜单1.2.2.3</a></li>
  45.             <li><a href="#">菜单1.2.2.4</a></li>
  46.         </ul>
  47.     </li>
  48.     <li class="firstMenu" lang="1.3"><a href="#">| 菜单1.3</a></li>
  49.     <li class="secondMenu" lang="1.3">
  50.         <ul style="">
  51.             <li><a href="#">菜单1.3.1</a></li>
  52.             <li><a href="#">菜单1.3.2</a></li>
  53.         </ul>
  54.     </li>
  55. </ul>

css文件内容如下：

下载: menu.css
  1. ul{margin: 0px;padding: 0px;}
  2. li{margin: 0px;padding: 0px;list-style: none;}
  3. #menu{width: 600px;overflow: hidden;height: 120px;}
  4. .firstMenu{float: left;}
  5. .firstMenu a{text-decoration:none; cursor:pointer; color: #787878;height: 25px;line-height: 25px; width:80px;display: block; font-size: 13px;font-weight: bold;text-decoration: none;float: left;overflow:hidden;white-space:nowrap;}
  6. .secondMenu{float: left;}
  7. .secondMenu a{text-decoration:none;color: #CDCDCD;height: 22px;line-height: 26px; font-size:12px;overflow:hidden; width:80px;display: block;}
  8. .thirdMenu {float:left; width:80px; display:block;}
  9. .thirdMenu a{text-decoration:none;color: #CDCDCD;height: 22px;line-height: 26px; font-size:12px;overflow:hidden; width:80px;display: block;}
  10. .thirdMenu a:hover{ color:Green; text-decoration:underline;}

这只是一般化的写法，在应用中完全可以修改样式，但最好不要修改html结构和css中的命名，原先的命名方式也很好理解
jquery中有show、hide、fadeIn、fadeOut等特效函数可以应用，这让我们担心的类似flash的效果实现成为可能，比如$(”.thirdMenu[lang='1.1.1'] *”).show(”normal”).fadeIn();一句便实现了一个三级菜单的显示特效。
另外如果采用mouseover事件作为特效的触发事件的话，由于菜单项之间间隔太小，而完成一个特效的时间往往大于从某一菜单项移到另一菜单项的时间，这就很可能导致多个菜单项同时“动态展现”的壮观场景，看着会十分的混乱，为了解决这一问题，借助了settimeout和cleartimeout函数，规定在某个菜单项上停留一段时间（本例默认一级菜单250毫秒，二级菜单300毫秒）才去触发特效事件，这样做能够区分开用户无意中将鼠标经过某菜单项和对某菜单项确实感兴趣的行为。为了不出现多个特效同时被触发的情况，在立刻某已经被触发的菜单项时，立即调用cleartimeout函数清除触发事件。一般化的代码如下：

  1. $(this).mouseover(function(){
  2.    var ts = this;
  3.    timeout = setTimeout(function(){overFirstMenu(ts);},250);
  4. }).mouseout(function(){
  5.    clearTimeout(timeout);
  6. });

在实现过程中很好的借助了前面定义的html结构和lang属性，并且需要注意节点选择的语法，如$(”.thirdMenu[lang='1.1.1'] *”)等，如在代码阅读过程中存在问题，请参考jquery文档，当然，不要忘记先引入最新的jquery.1.2.6.pack.js框架文件，js实现部分的完整代码如下：

下载: nav.js
  1. var timeout,timeout2;
  2. $(document).ready(function(){
  3. $("#menu a").focus(function(){$(this).blur();});
  4. $(".secondMenu,.thirdMenu").css("display","none");
  5.         $(".firstMenu a").each(function(){
  6.             $(this).mouseover(function(){
  7.                     var ts = this;
  8.                     timeout = setTimeout(function(){overFirstMenu(ts);},250);
  9.             }).mouseout(function(){
  10.                 clearTimeout(timeout);
  11.             });
  12.         });
  13.         $(".secondMenu a").each(function(){
  14.             $(this).mouseover(function(){
  15.                     var ts = this;
  16.                     timeout2 = setTimeout(function(){overSecondMenu(ts);},300);
  17.             }).mouseout(function(){
  18.                 clearTimeout(timeout2);
  19.             });
  20.         });
  21.     });
  22. function overFirstMenu(ts){
  23.     var tar=$(ts).parent().attr("lang");
  24.         var secondTar="";
  25.         if($(".secondA").length>0){
  26.         secondTar=$(".secondA").parent().attr("lang");
  27.                 }
  28.         if($(ts).attr("class")!="firstA"){
  29.             $(".secondMenu,.thirdMenu").hide("normal");
  30.                     $(".firstMenu a").css("color","").removeClass("firstA");
  31.                     $("#menu").children("li[lang='"+tar+"']").show("normal");
  32.                     $(ts).css("color","#3A79B7").addClass("firstA");
  33.                     $(".introMenu").fadeOut();
  34.                     if(secondTar!=""&&secondTar.substring(0,tar.length)==tar){
  35.                         if(secondTar!="1.1.1") $("#menu").children("li[lang='"+secondTar+"']").show("normal"
  36. );
  37.                         else{ 
  38.                             $(".thirdMenu[lang='1.1.1']").show("normal");
  39.                             $(".thirdMenu[lang='1.1.1'] *").show("normal").fadeIn();
  40.                         }
  41.                     }
  42.                 }
  43.                 else $(".introMenu").fadeIn();
  44. };
  45. function overSecondMenu(ts){
  46. if($(ts).attr("class")!="secondA"){
  47.    $(".thirdMenu").hide("normal");
  48.    $(".secondMenu a").css("color","").removeClass("secondA");
  49.    $(ts).css("color","#3A79B7").addClass("secondA");
  50.    var tar=$(ts).parent().attr("lang");
  51.    if(tar!="1.1.1") $("#menu").children("li[lang='"+tar+"']").show("normal");
  52.    else{ 
  53.       $(".thirdMenu[lang='1.1.1']").show("normal");
  54.       $(".thirdMenu[lang='1.1.1'] *").show("normal").fadeIn();
  55.    }
  56.   }
  57. }

之前还有一个click版本的，只需要改动部分js代码即可，如果您有使用需求同时又懒得改，可以联系我:-)
最后提供一个在线Demo地址和打包下载地址
在线Demo：http://www.blueocean.org/home
打包下载：下载链接