看似简单的一个菜单,确需要不少的知识点

1. getByClass

getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的。所以对ie6,7,8做特别的处理就行,而ie里边有个内置的属性一直被我们所忽略,document.all,这个比一般的document.getElementsByTagName('*')或许要快一点。

2. setTimeout 的巧妙用法。

当鼠标离开某个区域时,延时隐藏另外一个区域,而到另外一个区域是清除这个定时器。

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>二级延迟菜单 - 豪情</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#333;}
        table{border-collapse:collapse;border-spacing:0;}
        li{list-style:none;}
        a:focus,input,textarea{outline-style:none;}
        input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}
        a{color:#0a8cd2;text-decoration:none;}
        a:hover{text-decoration:underline;}
        .none{display:none}
        .demo{width:600px;height:500px;margin:30px auto;padding:30px;border:5px solid #ccc;background:#fff;}
        .main_nav{width:404px;height:30px;margin:0 auto;}
        .main_nav ul li{float:left;width:100px;height:30px;border-right:1px solid #666;position:relative;}
        .main_nav ul li a{display:block;height:30px;line-height:30px;text-align:center;background:#333;color:#ccc;text-decoration:none;}
        .submenu{position:absolute;left:0;top:30px;width:100px;display:none;}
        .submenu dd{height:31px;}
        .main_nav ul li dd a{display:block;height:30px;line-height:30px;text-align:center;color:#ccc;background:#333;border-bottom:1px solid #666;}
        .main_nav ul li dd a:hover{background:#555;color:#fff;}
    </style>
</head>
<body>
<div id="content" class="demo">
    <div class="main_nav hover">
        <ul>
            <li><a class="link" href="javascript:" title="">关于我们</a>
                <dl class="submenu">
                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>
                </dl>
            </li>
            <li><a class="link" href="javascript:" title="">新闻中心</a>
                <dl class="submenu">
                    <dd><a href="javascript:" title="">栏目子导航2</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航2</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航2</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航2</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航2</a></dd>
                </dl>
            </li>
            <li><a class="link" href="javascript:" title="">联系我们</a>
                <dl class="submenu">
                    <dd><a href="javascript:" title="">栏目子导航3</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航3</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航3</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航3</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航3</a></dd>
                </dl>
            </li>
            <li><a class="link" href="javascript:" title="">雁过留声</a>
                <dl class="submenu">
                    <dd><a href="javascript:" title="">栏目子导航4</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航4</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航4</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航4</a></dd>
                    <dd><a href="javascript:" title="">栏目子导航4</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    (function(window){
        /**
         * getElementsByClassname
         * @param oParent parent ele
         * @param cls classname
         * @return {*}
         */
        function getByClass(oParent, cls){
            if(document.getElementsByClassName){
                return (oParent || document).getElementsByClassName(cls);
            } else {
                oParent   = oParent || document;
                var res   = [],
                    child = null,
                    reg   = new RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
                for(var i = 0, len = oParent.all.length; i < len; i ++){
                    child = oParent.all[i];
                    if(reg.test(child.className)){
                        res.push(child);
                    }
                }
                return res;
            }
        }
        var content = document.getElementById('content'),
            oA      = getByClass(content, 'link'),
            child   = null,
            timer   = null,
            oDl     = getByClass(content, 'submenu');
        for(var i = 0, len = oA.length; i < len; i++){
            child             = oA[i];
            child.index       = i;
            child.onmouseover = function(){
                for(var j = 0; j < len; j++){
                    oDl[j].style.display = 'none';
                }
                oDl[this.index].style.display = 'block';
                clearTimeout(timer); // 清除从 dl 移回时的定时器
            }
            child.onmouseout = function(){
                var that = this;
                timer    = setTimeout(function(){
                    oDl[that.index].style.display = 'none';
                }, 500);
            }
            oDl[i].onmouseover = function(){
                clearTimeout(timer);
            }
            oDl[i].onmouseout = function(){
                var that = this;
                timer    = setTimeout(function(){
                    that.style.display = 'none';
                }, 500);
            }
        }
    }(window));
</script>
</body>
</html>

  

js二级下拉菜单的更多相关文章

  1. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 纯CSS3实现宽屏二级下拉菜单

    今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...

  3. flash滚动图片遮住二级下拉菜单解决方法

    如上图所示,在进行排版时,如果不注意会遇到二级下拉菜单被下边的img图片遮住.此种情况在ie7 8 中出现. 解决方法:给二级下拉菜单添加z-index:9999;position:relative; ...

  4. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Excel应用----制作二级下拉菜单【转】

    应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...

  7. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  8. CSS技巧分享:如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  9. boostrapt的二级下拉菜单

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta conte ...

随机推荐

  1. ADC及DA的头文件复析

    /************************************************************* ADC12,,,,这么多的定义,搞得我都昏死啦,抽出来可能好几一些..** ...

  2. CCLablettf读取显示xml文件内容显示中文

    CCDictionary *strings = CCDictionary::createWithContentsOfFile("tips2.xml"); const char *h ...

  3. PHP之数组函数归类

    数组之所以强大,除了本身声明.存储方式灵活,它还有坚强后盾:一系列功能各异的数组处理函数.就像一只军队,除了领队将军本身能征善战,指挥英明之外,还有一群不怕死.忠实于他的士兵,这样才能显得整体的强大. ...

  4. spark下测试akka的分布式通讯功能

    采用的spark版本为1.1.0 scala版本为2.10.4 编写scala类文件myactors.scala: package bluejoe import akka.actor._ import ...

  5. ASP 生成带日期的随机数

    <% Function getRnd() '**************************************** '返回值:如getRnd(),即输出2008082415534646 ...

  6. 20160526-20160531mybatis入门进阶

    mybatis第二天  高级映射 查询缓存 和spring整合 课程复习: mybatis是什么? mybatis是一人持久层框架,mybatis是一个不完全的ORM框架.sql语句需要程序员自己去编 ...

  7. kettle Row Normaliser(行转列)

    表1 设置 表2

  8. SVN服务器从Windows迁移到Linux

    gerui 2013.9.14 ge-rui@sohu.com 一.备份VisualSVN项目 1. 现在要使用Linux作为svn服务器,之前是在windows Server 2008上的,用的是V ...

  9. iOS中 常用的mac终端指令

    1.使用caffeinate阻止Mac运行屏幕保护和睡眠 caffeinate能阻止Mac进入睡眠状态,而且屏幕保护也不会激活.我们最好使用-t为命令加入具体的时间.比如下面的命令可以使Mac一小时内 ...

  10. [译]JavaScript 错误和处理

    JavaScript的调试是一个噩梦:一些错误刚开始很难理解,并且给出的错误函数也经常是没用的.如果把错误都列出来并给出解决办法会不会很有用呢. 下面列出了JavaScript一系列的奇怪错误.对于同 ...