jquery导航菜单移上去显示子菜单特效

最新推荐文章于 2022-09-07 09:47:57 发布

微小东

最新推荐文章于 2022-09-07 09:47:57 发布

阅读量2.5k

点赞数

分类专栏： js jquery 文章标签： jquery 导航菜

本文链接：https://blog.csdn.net/u014796999/article/details/52040189

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

jquery导航菜单移上去显示子菜单特效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery导航菜单移上去显示子菜单特效</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
*{
	margin:0;
	padding: 0;
	position:relative;
	z-index:0;
}
/*顶部css*/
	#head{
		height: 100px;
		background: #32CD32;
	}
	#head ul{
		height: 100px;
	}
	#head ul li{
		height:100px;
		line-height: 100px;
		float: left;
		margin-left: 250px;
		list-style: none;		
	}
	#head ul li a{
		height: 100px;
		line-height: 100px;
		color:#fff;
		text-decoration: none;
		display: block;
		padding:0 20px;
	}
	#head ul li a:hover{
		background: black;
	}

/*中间css*/
.main{
	height: 200px;
	background: blue;
	display: none;
}
#actionList{
	height: 200px;
	z-index:20;
	margin-top: 5px;
}
#main {
	height:300px;
	margin-top:-200px;
	background-color:red;
	z-index:10;
}
</style>
</head>
<body>
<script>
	$(document).ready(function(){

		$("#head ul li a").mouseover(function(){
		
   		 var index  = $("#head ul li a").index($(this)),
          	divList = $("#actionList").children("div");
		    divList.hide(); 
		    divList.eq(index).show();
			clearTimeout(test);
			divList.mouseover(function(){
				clearTimeout(test);
		    	$(this).show();
		    });
		    divList.mouseout(function(){
 	 		    clearTimeout(test);
		    	$(this).hide();
		    });
		});

		$("#head ul li a").mouseout(function(){
   		 var index  = $("#head ul li a").index($(this)),
          	 divList = $("#actionList").children("div");
		     test=setTimeout(function () {
		   		 divList.hide(); 
			    }, 2000);
		});
	});
</script>
	<div id="head">
		<ul>
			<li><a href="#">one</a></li>
			<li><a href="#">two</a></li>
			<li><a href="#">three</a></li>
			<li><a href="#">four</a></li>
		</ul>
	</div>
	<div id="actionList">
		<div class="main">
			<h1>这是第1个</h1>
		</div>
		<div class="main">
			<h1>这是第2个</h1>
		</div>
		<div class="main">
			<h1>这是第3个</h1>
		</div>
		<div class="main">
			<h1>这是第4个</h1>
		</div>
	</div>
	<div id="main">
		<h1>这是中间的部分</h1>
	</div>
</body>
</html>