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程序设计有所帮助。