导航菜单横排

just4you

浏览: 63841 次

最近访客更多访客>>

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

编程资讯网页游戏 ASP.net 游戏

“五一”不能闲着，看有什么东东就整理一下吧。
老了，脑袋什么也记不住了，写下来，想不起来的时候也有个参考：（
这是抄来的“中国站长站”的导航栏，记下，说不定什么时候用到。
看着人家的代码，我基本上是手写了一遍，不过还是有一点点点的收获的：）
不过也有不足，导航的大类和小类之间的线不知道怎么除去，难道只能用图片了吗：（
PS：5.2晚上没睡的时候想了想，修改了一下CSS，线除去了，呵呵，也算小小的收获：）

<html>
<head>
<title> 仿chinaz导航 </title>
<script type="text/javascript" src="myjs.js">
</script>
<style type="text/css">
.global_nav{
	margin:0;
	border:1px solid #ccc;
	width:750px;
	height:60px;
	/*overflow:hidden;*/
}
.nav_main{
	width:720px;
	height:30px;
	margin:0px 0px 0px 15px;
	overflow:hidden;	
}
.nav_main ul{
	margin:0px;
}
.nav_main li{
	float:left;
	text-align:center;
	list-style:none;
}
.nav_current{
	border-top:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;
	display:block;
	font-size:14px;
	font-weight:bold;
	color:green;
	width:90px;
	height:28px;/*5.2修改*/
	margin:4px 0 0px 0;
	padding:5px 0 3px 0;	
	text-decoration:none;
	background-color:#e6e6e6;
	overflow:hidden;
}
.nav_link{
	border-bottom:1px solid black;
	font-size:14px;
	width:90px;
	height:26px;/*5.2修改*/
	padding:5px 0 2px 0;
	margin:4px 0 0 0;
	text-decoration:none;
}
.nav_sub{
	height:30px;
	text-align:left;
	font-size:12px;
	margin:0 0 0 15px;	
}
.sub_box{
	float:left;
	width:720px;
	height:30px;
	margin:0 0 0 0;
	border-left:1px solid black;/*5.2修改*/
	border-right:1px solid black;/*5.2修改*/
	border-bottom:1px solid black;/*5.2修改*/
	background-color:#E6E6E6;
}
.nav_sub li{
	float:left;
	display:inline;
	height:20px;
	margin:0;
	padding:0px 5px 0px 5px;
	list-style:none;	
}
.nav_sub ul{
	margin:10px 0 0 0;
}
.dis{
	display:block;
}
.undis{
	display:none;
}
.nav_current a:link{
	color:green;
	text-decoration:none;
}
.nav_current a:visited{
	color:green;
	text-decoration:none;
}
.nav_current a:hover{
	color:red;
	text-decoration:none;
}
.nav_link a:link,.nav_link a:visited,.nav_link a:hover{
	color:blue;
	text-decoration:none;
}
.nav_sub li a:link,.nav_sub li a:visited,{
	color:blue;
	text-decoration:none;
}
.nav_sub li a:hover{
	color:blue;
	text-decoration:none;
	/*background-color:red;*/
}
</style>
</head>
<body>
<a href="#">link</a>
<div class="global_nav">
	<div class="nav_main">
		<ul>
			<li><span id="nav1" class="nav_current" onmouseover="doClick(this);"><a href="#">首 页</a></span></li>
			<li><span id="nav2" class="nav_link" onmouseover="doClick(this);"><a href="#">站长在线</a></span></li>
			<li><span id="nav3" class="nav_link" onmouseover="doClick(this);"><a href="#">网站运营</a></span></li>
			<li><span id="nav4" class="nav_link" onmouseover="doClick(this);"><a href="#">联盟资讯</a></span></li>
			<li><span id="nav5" class="nav_link" onmouseover="doClick(this);"><a href="#">新闻资讯</a></span></li>
			<li><span id="nav6" class="nav_link" onmouseover="doClick(this);"><a href="#">设计在线</a></span></li>
			<li><span id="nav7" class="nav_link" onmouseover="doClick(this);"><a href="#">网络编程</a></span></li>
			<li><span id="nav8" class="nav_link" onmouseover="doClick(this);"><a href="#">服 务 器</a></span></li>
		</ul>
	</div>
	<div class="nav_sub">
		<div class="sub_box dis" id="sub1">
			<ul>
				 <li><strong>热点通告：</strong></li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub2">
			<ul>
				<li><a href="#">好站推荐</a>　| </li>
				<li><a href="#">站长聚会</a>　| </li>
				<li><a href="#">站长访谈</a>　| </li>
				<li><a href="#">站长茶馆</a>　| </li>
				<li><a href="#">网站排行</a> </li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub3">
			<ul>
				<li><a href="#">建站经验</a>　| </li>
				<li><a href="#">策划盈利</a>　| </li>
				<li><a href="#">搜索优化</a>　| </li>
				<li><a href="#">网站推广</a>　| </li>
				<li><a href="#">免费资源</a> </li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub4">
			<ul>
				<li><a href="#">联盟新闻</a>　| </li>
				<li><a href="#">联盟介绍</a>　| </li>
				<li><a href="#">联盟点评</a>　| </li>
				<li><a href="#">网赚技巧</a> </li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub5">
			<ul>
				<li><a href="#">业界动态</a>　| </li>
				<li><a href="#">收购融资</a>　| </li>
				<li><a href="#">门户动态</a>　| </li>
				<li><a href="#">搜索引擎</a>　| </li>
				<li><a href="#">网络游戏</a>　| </li>
				<li><a href="#">电子商务</a>　| </li>
				<li><a href="#">广告传媒</a>　| </li>
				<li><a href="#">厂商开发</a> </li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub6">
			<ul>
				<li><a href="#">酷站推荐</a>　| </li>
				<li><a href="#">网页设计</a>　| </li>
				<li><a href="#">WEB标准</a>　| </li>
				<li><a href="#">视频处理</a>　| </li>
				<li><a href="#">设计活动</a> </li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub7">
			<ul>
				<li><a href="#">Asp编程</a>　| </li>
				<li><a href="#">Php编程</a>　| </li>
				<li><a href="#">.Net编程</a>　| </li>
				<li><a href="#">Xml编程</a>　| </li>
				<li><a href="#">Access</a>　| </li>
				<li><a href="#">Mssql</a>　| </li>
				<li><a href="#">Mysql</a> </li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub8">
			<ul>
				<li><a href="#">Web服务器</a>　| </li>
				<li><a href="#">Ftp服务器</a>　| </li>
				<li><a href="#">Mail服务器</a>　| </li>
				<li><a href="#">Dns服务器</a>　| </li>
				<li><a href="#">Win服务器</a>　| </li>
				<li><a href="#">Linux服务器</a>　| </li>
				<li><a href="#">安全防护</a> </li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

myjs.js文件

function doClick(o){
	//变量o指向触发monseover事件的对象，这里是<span/>元素
	//修改<span/>元素的class属性
	 o.className="nav_current";
	 var j;
	 var id;
	 var e;
	 for(var i=1;i<=8;i++){
	   id ="nav"+i;
	   //取得元素
	   j = document.getElementById(id);
	   //取得子栏目的元素
	   e = document.getElementById("sub"+i);
	   //循环，如果id值与当前<span/>元素的id属性值不同，就修改对应元素的class属性值，同时把对应的sub栏目的可见性设置为none
	   if(id != o.id){
	   	 j.className="nav_link";
	   	 e.style.display = "none";
	   }else{
			e.style.display = "block";
	   }
	 }
}

分享到：