仿美橙互联的导航效果

作者：简简单单 2009-11-02

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>美橙互联 导航</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK href="http://www.cndns.com/style/public.<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>" type=text/css rel=stylesheet>
<SCRIPT src="http://www.cndns.com/Scripts/jquery.js" type=text/javascript></SCRIPT>
<style>
*{margin:0;padding:0}
li{list-style:none;}
#nav_wrap{margin:20px auto;}
#nav li{ text-align:center;font-size:12px;}
</style>
</HEAD>
<BODY>
<DIV id=nav_wrap>
<DIV id=nav>
<DIV class=l></DIV>
<UL class=c>
  <LI><SPAN class=v><A href="#">首页</A></SPAN> 
  <DIV class=kind_menu style="LEFT: 20px">欢迎您访问美橙互联,我们为您提供最优质的互联网服务! </DIV></LI>
  <LI><SPAN class=v><A href="#">特惠套餐</A></SPAN> 
  <DIV class=kind_menu style="LEFT: 40px"><A 
  href="http://www.cndns.com/cn/set/list_dx.shtml">电信特惠套餐</A> <SPAN>|</SPAN> <A 
  href="http://www.cndns.com/cn/set/list_sx.shtml">智能双线套餐</A> </DIV></LI>
  <LI><SPAN class=v><A href="http://www.cndns.com/cn/domain/">域名频道</A></SPAN> 
  <DIV class=kind_menu><A href="http://www.cndns.com/cn/domain/">英文域名</A> 
  <SPAN>|</SPAN> <A href="http://www.cndns.com/doc/zhdomain/">中文域名</A> 
  <SPAN>|</SPAN> <A href="http://www.cndns.com/cn/tywz/">通用网址</A> <SPAN>|</SPAN> 
  <A href="http://www.cndns.com/cn/domain/domain_list.shtml">价格列表</A> 
  <SPAN>|</SPAN> <A href="http://www.gdomain.cn/" target=_blank>域名交易</A> 
  <SPAN>|</SPAN> <A href="http://www.cndns.com/help/?rootid=1">域名相关帮助</A> 
  <SPAN>|</SPAN> <A href="http://www.cndns.com/cn/dns/">智能加速</A> </DIV></LI>
  </UL>
<DIV class=r></DIV>
</DIV>
<DIV id=tmenu></DIV>
</DIV>
<SCRIPT type=text/javascript>
    var site_url = window.location.href.toLowerCase();	
	switch (true) {		
		default :
			$("#nav li").attr("class","");
			$("#nav li").eq(0).attr("class","nav_lishw");
			$(".nav_lishw .v a").attr("class","sele");
			$(".nav_lishw .kind_menu").show();
	} 
	$("#nav li").hover(
		function(){
			clearTimeout(setTimeout("0")-1);
			$("#nav .kind_menu").hide(); 
			$("#nav li .v .sele").attr("class","shutAhover");
			$(this).attr("id","nav_hover")
			$("#nav_hover .v a").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","")
			$("#nav li .v .shutAhover").attr("class","sele");
			setTimeout(function(){
				$(".nav_lishw .kind_menu").show();
				$(".nav_lishw .v a").attr("class","sele");
			},50); 
		}
	);
	
</SCRIPT>
</BODY></HTML>

提示：您可以先修改部分代码再运行

仿美橙互联的导航效果

相关文章

精彩推荐