横向二级领航 _Web前端

横向二级导航
文件清单

navi.html
navi.css
navi.js
jquery-1.6.2.js

navi.css

@CHARSET "UTF-8";
body{margin:0 auto;padding:0;font-size:12px;font-family:Arial '宋体'}
ul,li{list-style: none;display:inline-block;padding:0;margin:0;}
a{outline-style: none;}
.navi_main{width:100%;height:30px;margin:0 auto;padding:0;text-align:center;background-color:#D7D7D7;overflow:hidden;}
ul.navi_root_ul{width:80%;}
li.navi_root_li{width:70px; text-align: left;}
.navi_root_li a{width:70px;height:15px;font-weight:bolder;font-size:14px;padding:8px 0 7px;color:#333;text-decoration: none;display:block;}
.navi_root_li .a_hover{color:#ea3234;background-color:#D2D2D2;}
ul.navi_child_ul{width:140px;position: absolute;z-index: 999;overflow:hidden;background-color:#D7D7D7;padding:5px;}
li.navi_child_li{float:left;text-align:left;margin:1px 0;}
li.navi_child_li a{width:130px;height:15px;font-size:12px;padding:0px 5px;color:#333;float:left;text-align:left;text-decoration: none;display:block;}
.navi_child_li a:hover{color:#ea3234;background-color:#D2D2D2;}
.hide{display:none;}

navi.js

/**
 * 
 * 处理导航下拉列表切换函数
 * @author cxiaolng
 * @version 1.0
 * @time 2013-1-23 13:44:58
 * 
 */

/**
 * 文档加载完成后执行函数
 */
$(function(){
	navi_init();
});

/**
 * 初始化导航 
 */
navi_init = function(){
	
	//初始化导航链接index
	$('li.navi_root_li').hover(function(){
		$(this).children('a.root_a').addClass('a_hover');
		$(this).children('ul').slideDown(200);
	}, function(){
		$(this).children('a.root_a').removeClass('a_hover');
		$(this).children('ul').slideUp(200);
	});
}

navi.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/navi.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/navi.js"></script>
<title>The beautiful from navigation.</title>
</head>
<body>
<div class="navi_main">
	<ul class="navi_root_ul">
		<li class="navi_root_li">
			<a class="root_a" href="#">导航一</a>
			<ul class="navi_child_ul hide">
				<li class="navi_child_li"><a class="child_a" href="#">一</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">二</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">三</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">四</a></li>
			</ul>
		</li>
		<li class="navi_root_li">
			<a class="root_a" href="#">导航二</a>
			<ul class="navi_child_ul hide">
				<li class="navi_child_li"><a class="child_a" href="#">一</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">二</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">三</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">四</a></li>
			</ul>
		</li>
		<li class="navi_root_li">
			<a class="root_a" href="#">导航三</a>
			<ul class="navi_child_ul hide">
				<li class="navi_child_li"><a class="child_a" href="#">一</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">二</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">三</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">四</a></li>
			</ul>
		</li>
		<li class="navi_root_li">
			<a class="root_a" href="#">导航四</a>
			<ul class="navi_child_ul hide">
				<li class="navi_child_li"><a class="child_a" href="#">一</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">二</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">三</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">四</a></li>
			</ul>
		</li>
		<li class="navi_root_li">
			<a class="root_a" href="#">导航五</a>
			<ul class="navi_child_ul hide">
				<li class="navi_child_li"><a class="child_a" href="#">一</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">二</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">三</a></li>
				<li class="navi_child_li"><a class="child_a" href="#">四</a></li>
			</ul>
		</li>
	</ul>
</div>
<div id="in"></div>
<div id="out"></div>
</body>
</html>

测试期间发现一个问题，当下拉列表出现后将鼠标光标快速移出，在列表没有完全收起前迅速进入，下拉列表会自动循环收起展开。在网上找到一个很好的文章（http://honkang.blog.163.com/blog/static/47795325201022531920788/）觉得写的不错。修改后的navi.js如下

/**
 * 
 * 处理导航下拉列表切换函数
 * @author cxiaolng
 * @version 1.0
 * @time 2013-1-23 13:44:58
 * 
 */

/**
 * 文档加载完成后执行函数
 */
$(function(){
	navi_init();
});

/**
 * 初始化导航 
 */
navi_init = function(){
	
	//初始化导航链接index
	/*$('li.navi_root_li').hover(function(){
		$(this).children('a.root_a').addClass('a_hover');
		$(this).children('ul').slideDown(200);
	}, function(){
		$(this).children('a.root_a').removeClass('a_hover');
		$(this).children('ul').slideUp(200);
	});*/
	// 线程 IDs
	var mouseover_tid = [];
	var mouseout_tid = [];
	 
	$('li.navi_root_li').each(function(index){
		$(this).hover(
		   	// 鼠标进入
		   	function(){
		    	var _self = this;
		   	 	// 停止卷起事件
		    	clearTimeout(mouseout_tid[index]);
		    	// 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中
		    	mouseover_tid[index] = setTimeout(function() {
		     	$(_self).children('ul:eq(0)').slideDown(200);
		    	}, 400);
		   },
		   // 鼠标离开
		   function(){
		   		var _self = this;
		    	// 停止展开事件
		    	clearTimeout(mouseover_tid[index]);
		    	// 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中
		    	mouseout_tid[index] = setTimeout(function() {
		     	$(_self).children('ul:eq(0)').slideUp(200);
		    	}, 400);
		   }
	  );
	});
}