<p>自己做了款菜单栏。朋友也提供了网上其他人做的菜单DEMO。不错。但三思后，还是决定发表这篇日志。毕竟是自己苦思出来的结果。不保存实为可惜。[尽管一般]。其他的DEMO备份下。留学习吧。贴效果：贴代码：<%@PageAutoEventWireup="true"CodeBehind="选项卡重新做【自测】【重要】.aspx.cs"Inherits="WebApplicationTest.选项卡重新做_自测__重要_"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>模拟菜单[可动态完成ajax]</title><style>*{margin:0;padding:0;}#dvMain{height:30px;}#dvMainul{height:30px;background-color:#eee;}#dvMainulli{list-style-type:none;fl劳务派遣系统软件t:left;padding:5px15px;height:20px;line-height:20px;cursor:pointer;}.hover{background:#ccc;}#dvHelp{min-height:30px;position:relative;display:none;line-height:30px;background:#abcdfe;}</style><scriptsrc="scripts/jquery-1.4.1-vsdoc.js"></script><script>varleftPx=0;//子菜单应该距左的距离[像素]varrt=false;//判断处于被悬停的对象是否是#dvMain的子级元素varisNeedDetermine=false;//判断是否需要隐藏因#dvMain悬停而添件的子级菜单varisHorizontal=false;//设置子菜单的排列方向[true为横向排列][false为竖向排列]$(function(){isNeedDetermine=false;$("#dvMaina,#dvMainli").live("mouseovermouseout",function(evt){evt.stopPropagation();})$("#dvHelpdiv").css("text-align","center").css("background-color","red");$("#dvMainulli").mouseover(function(ev){var$this=$(this);$this.addClass("hover").siblings().removeClass();$("#dvHelp").empty().show();vartext=$this.text();leftPx=$this.offset().left;$("#dvHelp").get(0).style.left=leftPx+"px";varsubContent='';for(vari=1;i<4;i++){subContent='';//在这个地方可以进行ajax交互。将交互结果做为子菜单并填充.subContent="<ahref='#'>"+text+i+"</a>";if(!isHorizontal){subContent="<divalign='center'>"+subContent+"</div>";}$("#dvHelp").append(subContent);}varsubItemWidth=isHorizontal?"280px":$this.outerWidth(false);$("#dvHelp").width(subItemWidth);$("#dvHelp").hide().slideDown('normal');ev.stopPropagation();});$("#dvMain").mouseout(function(evt){isNeedDetermine=true;evt.stopPropagation();});$(document).mouseover(function(evt){//节省CPU的处理资源[自己是这样认为的]//因为页面中的元素存在事件冒泡,悬停到任何一个元素上,//都会冒泡到document上，并触发鼠标悬停事件,在这里加判断,应该会减少CPU的处理资源.if(isNeedDetermine){vartargetEle=evt.target.tagName;rt=false;varlen=$(evt.target).parents("div#dvMain").length;rt=len!=0;if(!rt){$("#dvHelp").empty().hide();$("li").removeClass();leftPx=0;}}});})</script></head><body><formrunat="server"><div><ul><li>我的电脑</li><li>我的桌面</li><li>我的回收站</li><li>我的文档</li><li>我的测试文档</li><li>我的课件</li><li>我的音乐</li><li>我的视频</li><li>我的娱乐</li></ul><div></div></div><br/>用来做测试的内容段。看看子菜单选项卡出现时,是将本段内容遮盖住，还是将本段撑开[理想状态为遮盖住]</form></body></html></p>
