js 导航分类特效

最新推荐文章于 2023-12-04 18:11:43 发布

xxtianxiaxin

最新推荐文章于 2023-12-04 18:11:43 发布

阅读量170

点赞数

分类专栏： web 文章标签：化工交通 UP IE Firefox

web 专栏收录该内容

32 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*topbar*/
.toppop1{
	position:absolute;
	padding:8px;
	left:89px;
	top:25px;
	width:600px;
	border:1px solid #aebac3;
	background-color:#FFFFFF;
	background-position:0 bottom;
	display:none;
	z-index:10;
}
.toppop1 ul{overflow:hidden;}
.toppop1 li{float:left;height:20px;width:100px;white-space:nowrap;overflow:hidden;}
.toppop1 a{padding:2px 4px;}

.title{color:#030;}
.allservice1{
	position:absolute;
	z-index:13;
	left: 86px;
	top: -2px;
}
.allservice1 a{
	border:0;
	white-space:nowrap;
	margin-right:5px;
	padding:3px 3px 3px 4px;
	position:absolute;
	z-index:30;
	text-decoration:none;
	display:block;
	left: 3px;
	top: 7px;
	*top: 5px;
}
.allservice1 a:hover{text-decoration:none;}
.allservice1 .titleon{margin-right:5px;padding:2px 2px 2px 3px;position:absolute;z-index:1231;background-color:#FFFFFF;border:1px solid #aebac3;border-bottom-color:#FFFFFF;text-decoration:none;display:block;}
.allservice1 span{background:url(../images/ji.gif) no-repeat 100% 0%;padding-right:14px;color:#666;}

.top_nav_a_here_up{width:310px;float:left;z-index:1000;}
.top_nav_b_here_up{position:relative;width:300px;float:right;}
.top_reg_here_up{width:360px;padding:0;text-align:center;}
</style>
<script type="text/javascript">
if (document.all) { //ie
	window.attachEvent("onload", loadType);
} else { //ff
	window.addEventListener("load", loadType, false);
}
function loadType() {
	var popIndex = -1;
	var top_nav = document.getElementById("top_nav_here_up").getElementsByTagName("a");
	for (var i = 0; i < top_nav.length; i++) {
		if (top_nav[i].hasChildNodes() && top_nav[i].firstChild.nodeName == "SPAN") {
			top_nav[i].onmouseover = function (i) {
				return function () {
					this.className = "titleon";
					if (popIndex != -1 && popIndex != i) {
						top_nav[popIndex].className = "title";
						document.getElementById("pop" + popIndex).style.display = "none";
					}
					showPop(i);
					popIndex = i;
				};
			}(i);
			top_nav[i].onmouseout = function (i) {
				return function (evt) {
					var popWrap = document.getElementById("pop" + i);
					if (/Firefox/.test(window.navigator.userAgent)) {
						if (!(this.compareDocumentPosition(evt.relatedTarget) & 16) && popWrap != evt.relatedTarget) {
							top_nav[i].className = "title";
							popWrap.style.display = "none";
							return;
						}
						popWrap.onmouseout = function (i) {
							return function (evt) {
								if (!(this.compareDocumentPosition(evt.relatedTarget) & 16) && popWrap != evt.relatedTarget) {
									top_nav[i].className = "title";
									this.style.display = "none";
								}
							};
						}(i);
						return;
					}
					if (!popWrap.contains(event.toElement)) {
						top_nav[i].className = "title";
						popWrap.style.display = "none";
						return;
					}
					popWrap.onmouseout = function (i) {
						return function () {
							if (!this.contains(event.toElement)) {
								top_nav[i].className = "title";
								this.style.display = "none";
							}
						};
					}(i);
				};
			}(i);
		}
	}
}
function showPop(num) {
	document.getElementById("pop" + num).style.display = "block";
}
</script>
</head>
<body>
<div id="top_nav_here_up">
	<ul class="top_nav_a_here_up">
		<li class="allservice1"><a href="#" target="_blank"><span>示例</span></a></li>
	</ul>
</div>
<div id="pop0" class="toppop1">
	<ul>
		<li><a href="http://www.hereonline.com/buy/trade/8.html">化工</a></li>
		<li><a href="http://www.hereonline.com/buy/trade/14.html">机械</a></li>
		<li><a href="http://www.hereonline.com/buy/trade/12.html">交通</a></li>
		<li><a href="http://www.hereonline.com/buy/trade/509.html">通讯</a></li>
	</ul>
</div>
</body>
</html>