单元6 设计导航菜单类网页特效

单元6设计导航菜单类网页特效JavaScript+jQuery网页特效设计任务驱动教程（第2版）名校名师精品系列教材人民邮电出版社学会设计导航菜单类网页特效掌握JavaScript的this指针的使用方法正确使用jQuery的属性操作方法正确使用jQuery的CSS操作方法教学目标pedagogicalobjectives目录导航任务6-1应用className和display等属性实现横向下拉菜单任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单任务6-7应用jQuery的one()和each()等方法设计复杂导航菜单任务6-8应用HTML元素的样式属性设计横向下拉菜单任务6-9应用jQuery的show()和hide()等方法设计纵向导航菜单任务6-10应用jQuery的slideDown()和slideUp()等方法设计有滑动效果的横向下拉菜单任务6-11应用jQuery的slideDown()和fadeOut()等方法设计下拉菜单任务6-1应用className和display等属性实现横向下拉菜单网页0601.html中的导航菜单如图所示。网页0601.html中导航菜单主要应用的CSS代码如表所示。序号程序代码0102030405060708.ddnewhead_mainnav.goods{background:url(images/unite_header.gif)no-repeat-300px0px}.ddnewhead_mainnava.goods:hover{z-index:500;background:#fffurl(images/unite_header.gif)no-repeat-400px0px;cursor:default;任务6-1应用className和display等属性实现横向下拉菜单序号程序代码091011121314151617181920212223242526position:relative}.ddnewhead_addnav.ddnewhead_banga.menu_btn{background:url(images/unite_header.gif)no-repeat-88px-237px;width:59px;text-align:center;border:1pxsolid#ccc;font-weight:bold;padding:3px9px;}.ddnewhead_addnav.ddnewhead_banga.menu_btn:hover{background:url(images/unite_header.gif)no-repeat-238px-237px;color:#f60;text-decoration:none;border:1pxsolid#ee7304;}任务6-1应用className和display等属性实现横向下拉菜单网页0601.html中导航菜单对应的HTML代码如表所示。序号程序代码0102030405060708091011121314151617181920<divclass="ddnewhead_topnav"id="_ddnav_class1"><ulclass="ddnewhead_mainnav"><li><aclass="nonce"href=""><span>首页</span></a></li><li><aclass="book"href="/"><span>图书</span></a></li><liclass="ddnewhead_goods"><aclass="goods"id="a_baihchannel"onmouseover="baimouseOver();"onmouseout="baimouseOut();"href="javascript:void(0);"><span>百货</span></a><divclass="ddnewhead_goods_panel"id="_ddnav_guan"style="display:none"onmouseover="baimouseOver();"onmouseout="baimouseOut();"><ul><li><ahref=""><spanclass="goods_link"></span>家居家纺</a><ahref=""><spanclass="goods_link"></span>家具装饰</a><ahref=""><spanclass="goods_link"></span>手表饰品</a><ahref=""><spanclass="goods_link"></span>鞋包皮具</a></li><li><ahref=""><spanclass="goods_link"></span>手机数码</a><ahref=""><spanclass="goods_link"></span>电脑办公</a><ahref=""><spanclass="goods_link"></span>玩具文具</a><ahref=""><spanclass="goods_link"></span>家用电器</a></li><li><ahref=""><spanclass="goods_link"></span>家居家纺</a><ahref=""><spanclass="goods_link"></span>潮流服装</a>任务6-1应用className和display等属性实现横向下拉菜单序号程序代码2122232425262728293031323334353637383940<ahref=""><spanclass="goods_link"></span>美妆个护</a><ahref=""><spanclass="goods_link"></span>运动户外</a></li><liclass="ddnewhead_goods_panel_list_last"><ahref=""><spanclass="goods_link"></span>食品保健</a><ahref=""><spanclass="goods_link"></span>汽车用品</a></li></ul></div></li><li><aclass=""href=""><span>品牌</span></a></li><li><aclass=""href=""><span>促销</span></a></li></ul><ulclass="ddnewhead_addnav"><liclass="ddnewhead_bang"><aclass="menu_btn"id="a_topchannel"onmouseover="showgaoji('a_topchannel','_ddnav_bang');"onmouseout="hideotherchannel('a_topchannel','_ddnav_bang');"href="/"target="_blank">当当榜</a><divclass="ddnewhead_ddbang_panel"id="_ddnav_bang"onmouseover="showgaoji('a_topchannel','_ddnav_bang’)”onmouseout="hideotherchannel('a_topchannel','_ddnav_bang');"><ulclass="ddnewhead_ddbang_list"style="width:67px">任务6-1应用className和display等属性实现横向下拉菜单序号程序代码4142434445464748495051<li><ahref=""target="_blank">图书畅销榜</a></li><li><ahref=""target="_blank">五星图书榜</a></li><li><ahref=""target="_blank">图书飙升榜</a></li><li><ahref=""target="_blank">新书热卖榜</a></li><li><ahref=""target="_blank">音乐畅销榜</a></li><li><ahref=""target="_blank">影视畅销榜</a></li></ul></div></li></ul></div>在网页0601.html中实现下拉菜单功能的JavaScript代码如表所示。序号程序代码01020304050607<scriptlanguage="javascript">varsug_gid=function(node){returndocument.getElementById(node);}functionbaimouseOver(){sug_gid('a_baihchannel').className="goodshover";任务6-1应用className和display等属性实现横向下拉菜单序号程序代码080910111213141516171819202122232425262728293031sug_gid('_ddnav_guan').style.display="block";}functionbaimouseOut(){sug_gid('a_baihchannel').className="goods";sug_gid('_ddnav_guan').style.display="none";}functionshowgaoji(aid,did){varobj=document.getElementById(aid);vardivotherChannel=document.getElementById(did);obj.className="menu_btnhover";divotherChannel.style.zIndex=1000;divotherChannel.style.display="block";}functionhideotherchannel(aid,did){vardivotherChannel=document.getElementById(did);varmydd=document.getElementById(aid);if(divotherChannel.style.display!="none"){divotherChannel.style.display="none";mydd.className="menu_btn";}}</script>目录导航任务6-1应用className和display等属性实现横向下拉菜单任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单任务6-7应用jQuery的one()和each()等方法设计复杂导航菜单任务6-8应用HTML元素的样式属性设计横向下拉菜单任务6-9应用jQuery的show()和hide()等方法设计纵向导航菜单任务6-10应用jQuery的slideDown()和slideUp()等方法设计有滑动效果的横向下拉菜单任务6-11应用jQuery的slideDown()和fadeOut()等方法设计下拉菜单任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单网页0602.html中的导航菜单如图所示。网页0602.html中导航菜单主要应用的CSS代码如表所示。序号程序代码0102030405060708.navli.on{background:url(../images/01nav01.png)no-repeat;}.navli.onem{background:url(../images/01nav02.png)no-repeatrighttop;width:100%;}任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单网页0602.html中导航菜单对应的HTML代码如表所示。序号程序代码0102030405060708091011121314151617181920<divid="header"><divclass="nav"><ulid="droplist_ul"><liid="n0"><em><ahref="default.htm">首页</a></em></li><liid="n1"><em><ahref="#">笔记本</a></em><ul><li><ahref="#">笔记本电脑</a></li><li><ahref="#">笔记本配件</a></li><li><ahref="#">电脑包</a></li></ul></li><liid="n2"><em><ahref="#">数码影音</a></em><ul><li><ahref="#">数码影像</a></li><li><ahref="#">MP3/MP4</a></li><li><ahref="#">GPS</a></li><li><ahref="#">相机/摄像机配件</a></li></ul></li><liid="n3"><em><ahref="#">手机通信</a></em>任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单序号程序代码21222324252627282930<ul><li><ahref="#">手机通信</a></li><li><ahref="#">手机配件</a></li></ul></li><liid="n4"><em><ahref="#">硬件外设</a></em>……</li><liid="n5"><em><ahref="#">办公设备</a></em>……</li></ul></div></div>网页0602.html中实现导航菜单功能的JavaScript代码如表所示。序号程序代码0102030405060708$(document).ready(function(){headmenu();//头部导航链接样式});//头部导航链接样式functionheadmenu(){//导航栏目$(".nav>ul>li:not(#n0)").hover(function(){//鼠标指针移动至该栏目任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单序号程序代码0910111213151617181920212223242526$(".nav>ul>li:not(#n0)").removeClass("on");$(this).addClass("on");$(this).find("ul").show();},function(){//鼠标指针离开该栏目$(this).removeClass("on");$(this).find("ul").hide();});//顶部菜单弹出后，鼠标指针移动样式替换$(".droplist>li").hover(function(){//鼠标指针移动$(this).addClass("hover");},function(){//鼠标指针离开$(this).removeClass();});}目录导航任务6-1应用className和display等属性实现横向下拉菜单任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单任务6-7应用jQuery的one()和each()等方法设计复杂导航菜单任务6-8应用HTML元素的样式属性设计横向下拉菜单任务6-9应用jQuery的show()和hide()等方法设计纵向导航菜单任务6-10应用jQuery的slideDown()和slideUp()等方法设计有滑动效果的横向下拉菜单任务6-11应用jQuery的slideDown()和fadeOut()等方法设计下拉菜单任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单网页0603.html中的导航菜单如图所示。网页0603.html中导航菜单主要应用的CSS代码如表所示。序号程序代码0102030405060708.all_fenlei-h2.leibie{cursor:pointer;line-height:28px;border-bottom:#fae6e51pxsolid;height:28px;}.all_fenlei-h2.leibie-a{border-right:1px#fff6f9;任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单序号程序代码09101112131415161718192021222324252627282930border-top:1pxsolid#fff6f9;border-left:1pxsolid#fff6f9;line-height:27px;border-bottom:1pxsolid#fae6e5;height:27px;background-color:#fff;}.all_fenlei-h2.leibie-a.leibieactive{border-right:1px#d23c83;border-top:1pxsolid#d23c83;z-index:999999;margin-left:12px;overflow:hidden;border-left:1pxsolid#d23c83;width:183px;line-height:25px;border-bottom:1pxsolid#d23c83;position:absolute;height:25px;background-color:#fff;}序号程序代码313233343536373839404142.all_fenlei-h2.leibie-a.hiddenlsit{z-index:8888;min-height:336px;background:url(../images/leibie-bg.gif)#fffrepeat-yrighttop;left:187px;width:597px;position:absolute;top:-33px;height:348px;border:1pxsolid#d23c83;}任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单网页0603.html中导航菜单主要应用的CSS代码如表所示。序号程序代码0102030405060708091011121314151617181920<divclass="l_left"><divclass="qbfl"id="allType"><h2class="all_fenlei"></h2><divclass="all_fenlei-h2"id="leftType"><divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">护肤</a></em><spanclass="small-num">面膜乳液</span><bclass="fl_arrow"></b></div><divclass="hiddenlsit"style="display:none"><divclass="list-left"><dl><dt>面部护肤</dt><dd>……</dd></dl><dl><dt>眼部护理</dt><dd>……</dd></dl><dl><dt>唇部护理</dt>任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单序号程序代码212223242526272829303132333435363738394041<dd>……</dd></dl></div><divclass="list-right"><dl><dt>热卖品牌</dt><dd>……</dd><dt>促销专区</dt><dd>……</dd></dl></div></div></div><divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">彩妆</a></em><spanclass="small-num">睫毛膏</span><bclass="fl_arrow"></b></div></div><divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">香水</a></em><spanclass="small-num">菲拉格慕雅顿</span><bclass="fl_arrow"></b></div></div>任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单序号程序代码424344454647484950515253<divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">美体瘦身</a></em><spanclass="small-num">减肥收腹</span><bclass="fl_arrow"></b></div></div><divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">全身护理</a></em><spanclass="small-num">护手霜润体乳</span><bclass="fl_arrow"></b></div></div>……</div></div></div>网页0603.html中导航菜单主要应用的CSS代码如表所示。序号程序代码01020304050607080910<scripttype="text/javascript">$("#leftType>div").bind("mouseenter",function(){$(this).attr("class","leibie-a").find("div:first").attr("class","leibieactive");$(this).find("div.hiddenlsit").show()});$("#leftType>div").bind("mouseleave",function(){$(this).find("div.hiddenlsit").hide();$(this).attr("class","leibie")});</script>6.1JavaScript的this指针JavaScript中最容易使人迷惑的恐怕就数this指针了，this指针在传统面向对象语言中是在类中声明的，表示对象本身，而在JavaScript中，this表示当前上下文，即调用者的引用。varjack={//定义一个人，名字为Jackname:"Jack",age:26}vartom={//定义另一个人，名字为Tomname:"Tom",age:24}functionprintName(){//定义一个全局的函数对象return;}alert(printName.call(jack));//设置printName的上下文为jack，此时的this为jackalert(printName.call(tom));//设置printName的上下文为tom，此时的this为tom6.2jQuery的属性操作方法addClass()方法用于向被选元素添加一个或多个类。01OPTIONjQuery的addClass()方法$("btn").click(function(){$("h1,h2,p").addClass("top");//在添加类时可以选取多个元素$("div").addClass("content");});removeClass()方法用于从被选元素中删除一个或多个类。jQuery的removeClass()方法$("btn").click(function(){$("h1,h2,p").removeClass("top");});02OPTIONtoggleClass()方法用于对被选元素进行添加或删除类的切换操作。jQuery的toggleClass()方法$("h1,h2,p").toggleClass("top");03OPTION6.3jQuery的CSS操作方法jQuery的css()方法可以用于获取被选元素的一个或多个样式属性。01OPTION获取页面元素的CSS属性css("propertyname");jQuery的css()方法可以用于设置被选元素的一个样式属性。02OPTION设置页面元素的一个CSS属性css("propertyname","value");jQuery的css()方法也可以用于设置被选元素的多个样式属性。设置页面元素的多个CSS属性css({"propertyname":"value","propertyname":"value",……});03OPTION目录导航任务6-1应用className和display等属性实现横向下拉菜单任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单任务6-7应用jQuery的one()和each()等方法设计复杂导航菜单任务6-8应用HTML元素的样式属性设计横向下拉菜单任务6-9应用jQuery的show()和hide()等方法设计纵向导航菜单任务6-10应用jQuery的slideDown()和slideUp()等方法设计有滑动效果的横向下拉菜单任务6-11应用jQuery的slideDown()和fadeOut()等方法设计下拉菜单任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单网页0604.html中的导航菜单如图所示，应用JavaScript的onload、onmouseover、onmouseout事件，className、length等属性，以及getElementById()、getElementsByTagName()、replace()等方法实现该导航菜单，同时还要应用RegExp对象创建正则表达式。【任务描述】图6-4应用onmouseover等事件和className属性设计的横向导航菜单自定义函数menuFix()，当网页加载完成时，触发onload事件，调用该函数。联合使用getElementById()和getElementsByTagName()方法，获取指定的列表项。当鼠标指针指向导航菜单对应的列表项时，触发onmouseover事件，通过className属性设置其样式。当鼠标指针离开导航菜单对应的列表项时，触发onmouseout事件，通过className属性清除其已设置的样式。【任务描述】任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单网页0604.html中横向导航菜单主要应用的CSS代码如表所示。【特效实现】序号程序代码010203#navli:hoverul{left:auto;}序号程序代码040506#navli.sfhoverul{left:auto;}序号程序代码01020304050607080910111213<divid="daohang"><ulid="nav"><li><ahref="index.html">首页</a></li><li><ahref="#">功能手机</a><ul><li><ahref=""target="_blank">音乐手机</a></li><li><ahref=""target="_blank">商务手机</a></li></ul></li><li><ahref=""target="_blank">手机配件</a><ul><li><ahref=""target="_blank">耳机</a></li><li><ahref=""target="_blank">电池</a></li>网页0604.html中横向导航菜单对应的HTML代码如表所示。序号程序代码14151617181920</ul></li><li><ahref=""target="_blank">服务政策</a></li><li><ahref=""target="_blank">关于我们</a></li><li><ahref=""target="_blank">联系我们</a></li></ul></div>任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单在网页0604.html中实现横向导航菜单的JavaScript代码如表所示。序号程序代码0102030405060708091011121314<scripttype=text/javascript>functionmenuFix(){varsfEls=document.getElementById("nav").getElementsByTagName("li");for(vari=0;i<sfEls.length;i++){sfEls[i].onmouseover=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls[i].onmouseout=function(){this.className=this.className.replace(newRegExp("(?|^)sfhover\\b"),"");}}}window.onload=menuFix;</script>目录导航任务6-1应用className和display等属性实现横向下拉菜单任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单任务6-7应用jQuery的one()和each()等方法设计复杂导航菜单任务6-8应用HTML元素的样式属性设计横向下拉菜单任务6-9应用jQuery的show()和hide()等方法设计纵向导航菜单任务6-10应用jQuery的slideDown()和slideUp()等方法设计有滑动效果的横向下拉菜单任务6-11应用jQuery的slideDown()和fadeOut()等方法设计下拉菜单任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单网页0605.html中的导航菜单如图所示，当鼠标指针指向不同的菜单时，该菜单的背景改变，并自动显示对应的下拉菜单。应用jQuery的hover事件和css()方法实现该导航菜单。【任务描述】网页0605.html中的导航菜单当鼠标指针指向某一个菜单时触发hover事件，调用相应的函数，通过其offset()方法获取匹配元素相对于网页文档的位置，然后通过left属性获取匹配元素相对于网页文档水平方向的距离，通过top属性获取匹配元素相对于网页文档垂直方向的距离。使用jQuery的css()方法设置下拉菜单相对于网页文档的位置，同时显示下拉菜单。当鼠标指针离开下拉菜单时将其隐藏。【任务描述】任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单网页0605.html中导航菜单主要应用的CSS代码如表所示。【特效实现】序号程序代码010203040506070809101112131415161718.menuSub{position:absolute;width:120px;display:none;float:none;height:auto;top:0px;left:0px}.menuSubh3{text-align:center;line-height:35px;width:119px;background:url(../images/menu_bg.gif)no-repeat0px-70px;float:left;height:35px;color:#b50000;序号程序代码192021222324252627282930313233343536margin-left:1px;font-size:14px;cursor:pointer;font-weight:bold;}.menuSubul{border-top:mediumnone;border-bottom:#b500002pxsolid;border-left:#b500002pxsolid;border-right:#b500002pxsolid;width:113px;background:#fff;float:left;height:auto;padding:5px0px;margin-left:1px;}任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单序号程序代码010203040506070809101112131415161718192021222324<divclass="contain"><divclass="pagMenu"><divclass="menuMst"><ul><liid="top1_index"class="on"><aid="top1_linkIndex"href="">首页</a></li><liid="top1_mobile"><aid="top1_linkMobile"href="">手机</a></li><liid="top1_fitting"><aid="top1_linkFitting"href="">配件</a></li><liid="top1_benefit"><aid="top1_linkBenefit"href="">活动</a></li><li><ahref=""target="_blank">行业定制</a></li></ul></div><divclass="menuSub"><h3id="top1_menuSubTit">活动</h3><ul><li><aid="top1_HyperLink1"href="">周五巨献</a></li><li><aid="top1_HyperLink2"href="">周三疯抢</a></li><li><aid="top1_HyperLink3"href="">限时限量抢购</a></li><li><aid="top1_HyperLink4"href="">清仓特惠</a></li><li><aid="top1_HyperLink5"href="">优惠套餐</a></li><li><aid="top1_HyperLink6"href="">积分换购</a></li></ul></div></div></div>网页0605.html中导航菜单对应的HTML代码如表所示。任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单序号程序代码010203040506070809101112<scripttype="text/javascript">$("#top1_benefit").hover(function(){varoffset=$(this).offset();varintLft=offset.left;varintTop=offset.top;$(".menuSub").css({"left":intLft,"top":intTop});$(".menuSub").show();});$(".menuSub").hover(function(){},function(){$(this).hide();});</script>网页0605.html中实现导航菜单的JavaScript代码如表所示。目录导航任务6-1应用className和display等属性实现横向下拉菜单任务6-3应用jQuery的bind()和attr()等方法实现纵向导航菜单任务6-5应用jQuery的hover事件和css()方法设计横向导航菜单任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单任务6-2应用jQuery的hover事件和addClass()等方法实现横向导航菜单任务6-4应用JavaScript的onmouseover等事件和className属性设计横向导航菜单任务6-7应用jQuery的one()和each()等方法设计复杂导航菜单任务6-8应用HTML元素的样式属性设计横向下拉菜单任务6-9应用jQuery的show()和hide()等方法设计纵向导航菜单任务6-10应用jQuery的slideDown()和slideUp()等方法设计有滑动效果的横向下拉菜单任务6-11应用jQuery的slideDown()和fadeOut()等方法设计下拉菜单任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单网页0606.html中的导航菜单如图所示，当鼠标指针指向菜单时弹出双列下拉菜单。应用jQuery的find()和animate()等方法实现该导航菜单。【任务描述】网页0606.html中的导航菜单为倒数第3至倒数第2个（不含倒数第1个）菜单中的匹配元素（样式类为children的元素）添加类sleft。当鼠标指针指向菜单时，为其下拉菜单添加自定义动画，设置其opacity和height属性为show，并为菜单添加样式类navhover。当鼠标指针离开菜单时，等待自定义动画结束后隐藏下拉菜单，并移除菜单的样式类navhover。【任务描述】任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单网页0606.html中的导航菜单主要应用的CSS代码如表所示。【特效实现】序号程序代码01020304050607080910111213141516#wrap-nav.menuul.children{position:absolute;line-height:normal;width:225px;display:none;background:#fff;top:35px;left:3px;padding:5px0px0px;border-top:0pxsolid#d92640;border-right:2pxsolid#d92640;border-bottom:2pxsolid#d92640;border-left:2pxsolid#d92640;}#wrap-nav.menulia.xiala1{margin-top:5px;序号程序代码17181920212223242526272829303132display:inline-block;color:#fff;font-size:14px;text-decoration:none}#wrap-nav.menulia.navhover{background-image:url(images/menubgtu.gif);background-repeat:no-repeat;background-position:left-83px;color:#911531;}#wrap-nav.menuul.sleft{right:6px;left:auto;_right:5px}任务6-6应用jQuery的find()和animate()等方法设计横向导航菜单网页0606.html中导航菜单对应的HTML代码如表所示。序号程序代码0102030405060708091011121314151617181920212223<divclass="box"><divid="wrap-nav"><divclass="container"><divclass="outerbox"><divclass="innerboxclearfixmenu"><ulclass="menu"><liclass="spritemenu"><h3><aclass="xiala1"href=""><span>首页</span></a></h3></li><liclass="spritemenu"><h3><aclass="xiala1"href=""><span>PS教程</