jQuery实现仿美橙互联两级导航菜单的方法
本文实例讲述了jQuery实现仿美橙互联两级导航菜单的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>仿美橙互联导航菜单</title> <style> body{ margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; } a:link{ text-decoration:none; } a:visited{ text-decoration:none; } a:hover{ text-decoration:none; } a:active{ text-decoration:none; } #nav_wrap{margin:20pxauto;} #navli{text-align:center;font-size:12px;} #nav_wrap{width:960px;overflow:hidden;} #nav{background:url(/jscss/demoimg/201011/nav_bg.gif)repeat-x;height:39px;position:relative;width:950px;margin:0auto;} #nav.l{background:url(/jscss/demoimg/201011/navnbg.gif)no-repeat0px0px;height:39px;width:2px;float:left} #nav.r{background:url(/jscss/demoimg/201011/navnbg.gif)no-repeat-4px0px;height:39px;width:2px;float:right} #nav.bt_qnav{float:right;} #nav.bt_qnava{width:31px;height:29px;line-height:39px;display:block;padding:9px2px00;} #nav.c{float:left;margin:0;padding:0} #navli{float:left;list-style:none;} #navli.va{width:83px;height:39px;line-height:33px;display:block;color:#FFF;background:url(/jscss/demoimg/201011/navnbg.gif)no-repeat-87px6px;float:left;font-family:"MicrosoftYahei";} #navli.va:hover,#navli.v.sele{background:url(/jscss/demoimg/201011/navnbg.gif)no-repeat0px-47px;color:#116406;line-height:42px;font-size:14px} #nav.kind_menu{height:30px;*height:29px;line-height:30px;vertical-align:middle;position:absolute;top:37px;*top:39px;left:70px;width:880px;text-align:left;display:none;background:url(/jscss/demoimg/201011/nav_bg1.gif)repeat-xbottom;color:#656565;} #nav.kind_menua{color:#656565;float:left;text-align:center;width:90px;font-family:Arial,Helvetica,sans-serif;} #nav.kind_menua:hover{color:#ff4300;background:url(/jscss/demoimg/201011/navnbg.gif)no-repeat1px-91px;*background:url(/jscss/demoimg/201011/navnbg.gif)no-repeat1px-93px;} #nav.kind_menuspan{font-size:10px; color:#cecece;line-height:30px;*line-height:26px;float:left} #tmenu{background:url(/jscss/demoimg/201011/nav_bg1.gif)repeat-xbottom;height:28px;border-bottom:1pxsolid#eee; } </style> <SCRIPTsrc="/ajaxjs/jquery1.3.2.js"type="text/javascript"></SCRIPT> </head> <bodystyle="text-align:center"> <DIVid=nav_wrap> <DIVid=nav> <DIVclass=l></DIV> <ULclass=c> <LI><SPANclass=v><Ahref="#"target="_blank">首页</A></SPAN> <DIVclass=kind_menustyle="LEFT:20px">欢迎访问美橙互联!</DIV></LI> <LI><SPANclass=v><Ahref="#">特惠套餐</A></SPAN> <DIVclass=kind_menustyle="LEFT:40px"><A href="#">电信套餐</A><SPAN>|</SPAN><A href="#">双线套餐</A></DIV></LI> <LI><SPANclass=v><Ahref="#">域名频道</A></SPAN> <DIVclass=kind_menu><Ahref="#">英文域名</A> <SPAN>|</SPAN><Ahref="#">中文域名</A> <SPAN>|</SPAN><Ahref="#">通用网址</A><SPAN>|</SPAN> <Ahref="#">价格列表</A> <SPAN>|</SPAN><Ahref="#"target=_blank>域名交易</A> <SPAN>|</SPAN><Ahref="#">相关帮助</A> <SPAN>|</SPAN><Ahref="#">智能加速</A></DIV></LI> </UL> <DIVclass=r></DIV> </DIV><!--nav--> <DIVid=tmenu></DIV> </DIV><!--nav_wrap--> <SCRIPTtype=text/javascript> varsite_url=window.location.href.toLowerCase(); switch(true){ default: $("#navli").attr("class",""); $("#navli").eq(0).attr("class","nav_lishw"); $(".nav_lishw.va").attr("class","sele"); $(".nav_lishw.kind_menu").show(); } $("#navli").hover( function(){ clearTimeout(setTimeout("0")-1); $("#nav.kind_menu").hide(); $("#navli.v.sele").attr("class","shutAhover"); $(this).attr("id","nav_hover") $("#nav_hover.va").attr("class","sele"); $("#nav_hover.kind_menu").show(); }, function(){ if($(this).attr("class")!="nav_lishw"){ $("#nav_hover.v.sele").attr("class",""); $("#nav_hover.kind_menu").hide(); } $(this).attr("id","") $("#navli.v.shutAhover").attr("class","sele"); setTimeout(function(){ $(".nav_lishw.kind_menu").show(); $(".nav_lishw.va").attr("class","sele"); },50); } ); </SCRIPT> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。