js 导航分类特效

xxtianxiaxing

浏览: 690969 次
性别:
来自: 陕西

最近访客更多访客>>

dhx20022889

huaiao_chen

Corelory

FirstBlood

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

化工交通 UP IE Firefox

<!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>

html.rar (1.5 KB)
下载次数: 24

查看图片附件

分享到：

spring mail demo | yui(Yahoo User Interface )

2009-09-22 14:24
浏览 1277
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 导航分类特效

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 导航分类 特效

评论

发表评论

相关推荐

事务 不回滚

collectionTest

程序员珍藏的东西

java 重启 路由器 DI-604

java 环境变量

正则表达式替换 html 标签

关联div 拖动大小demo

js arguments 学习

java 图片 验证码

注册模块 js 校验

EL表达式截取字符串

eclipse myeclipse java 代码 注释 模板

java 字符串指定长度

jquery 做的好看 button

Eclipse中设置在创建新类时自动生成注释

cookie 历史记录

解决javascript读取中文cookie时的乱码问题

静态页面生成

ff和ie通用div置右上角落

Acegi在SSH(Struts+Spring+Hibernate)初级应用

最近访客更多访客>>

js 导航分类特效

事务不回滚

java 重启路由器 DI-604

java 图片验证码

eclipse myeclipse java 代码注释模板