文件清单
[list]
[*]navi.html
[*]navi.css
[*]navi.js
[*]jquery-1.6.2.js
[/list]
navi.css
navi.js
navi.html
测试期间发现一个问题,当下拉列表出现后将鼠标光标快速移出,在列表没有完全收起前迅速进入,下拉列表会自动循环收起展开。在网上找到一个很好的文章(http://honkang.blog.163.com/blog/static/47795325201022531920788/)觉得写的不错。修改后的navi.js如下
[list]
[*]navi.html
[*]navi.css
[*]navi.js
[*]jquery-1.6.2.js
[/list]
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);
}
);
});
}