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

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. Time complexity analysis of algorithms

    时间复杂性的计算一般而言,较小的问题所需要的运行时间通常要比较大的问题所需要的时间少.设一个程序P所占用的时间为T,则 T(P)=编译时间+运行时间. 编译时间与实例特征是无关的,且可假设一个编译过的 ...

  2. C语言中 指针和数组

    C语言的数组表示一段连续的内存空间,用来存储多个特定类型的对象.与之相反,指针用来存储单个内存地址.数组和指针不是同一种结构因此不可以互相转换.而数组变量指向了数组的第一个元素的内存地址. 一个数组变 ...

  3. HTTP层 —— 请求

    1.访问请求实例 要通过依赖注入获取当前 HTTP 请求实例,需要在控制器的构造函数或方法中对 Illuminate\Http\Request 类进行类型提示,这样当前请求实例会被服务容器自动注入: ...

  4. web app开发中 iPhone、iPad默认按钮样式问题

    webapp开发过程中,用html5+css3很方便,而且可以很方便的编译到Android ios等不同平台,但是ios需要单独处理一下,不然会出现一些想象不到的问题.下面就介绍一下各种问题的解决方法 ...

  5. SQLserver中的常量与变量、判断循环语句

    数据库中的变量与常量 数据库中定义变量 [起临时存储数据的作用] ---数据库中定义变量(运行时要从头到尾进行运行,从定义变量开始到赋值) --前面必须加 declare --定义变量 :    de ...

  6. Invalid result location value/parameter

    Invalid result location value/parameter(struts2),该问题在myeclipse8.6一下的版本不会出现,但是在myeclipse9.0中就会出现该错误.有 ...

  7. C#中var类型

    var关键字是C#3.0新增的特性,当你不能确定自己需要使用的类型时,可以选择使用var var可以代替任何类型,var关键字指示编译器根据初始化语句右侧表达式推断变量类型 例: int a = 2 ...

  8. C# 预处理指令

    导读 1.什么是预处理 2.预处理的好处 3.C#中的常见预处理指令 4.总结 什么是预处理         在计算机科学中,预处理通常是指利用某一程序(通常是预处理器)对某一格式的源码(如.cs C ...

  9. 2017 google Round C APAC Test 题解

    题解参考网上的答案,以及我自己的想法. 主要参考网站:http://codeforces.com/blog/entry/47181,http://codeforces.com/blog/entry/4 ...

  10. Linux启动提示“unexpected inconsistency;RUN fsck MANUALLY”

    问题:在开机启动时,提示“unexpected inconsistency;RUN fsck MANUALLY”进不了系统 解决方法: fsck不仅可以对文件系统进行扫描,还能修正文件系统的一些问题, ...