横向二级领航

2013-01-27

横向二级导航文件清单navi.htmlnavi.cssnavi.jsjquery-1.6.2.jsnavi.css@CHARSET UTF-8body{margin:0 a

横向二级导航
文件清单
navi.htmlnavi.cssnavi.jsjquery-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 href="#">导航一</a><ul href="#">一</a></li><li href="#">二</a></li><li href="#">三</a></li><li href="#">四</a></li></ul></li><li href="#">导航二</a><ul href="#">一</a></li><li href="#">二</a></li><li href="#">三</a></li><li href="#">四</a></li></ul></li><li href="#">导航三</a><ul href="#">一</a></li><li href="#">二</a></li><li href="#">三</a></li><li href="#">四</a></li></ul></li><li href="#">导航四</a><ul href="#">一</a></li><li href="#">二</a></li><li href="#">三</a></li><li href="#">四</a></li></ul></li><li href="#">导航五</a><ul href="#">一</a></li><li href="#">二</a></li><li href="#">三</a></li><li 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);});*/// 线程 IDsvar 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);   }  );});}

热点排行

Web前端

横向二级领航