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

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. CentOS 6.4安装搭建Tomcat 7

    1.检查java版本信息 java -versionjava version "1.7.0_65"OpenJDK Runtime Environment (rhel-2.5.1.2 ...

  2. 我的第二篇--nginx安装问题之路径问题

    这几天还是一直在搭建nginx,并且要在nginx的基础之上配置naxsi(WAF防火墙)并使它生效,但是随之而来的问题也会有很多,也许因为我是个新手,所以遇到的问题要多,不解的问题也要很多,不知道又 ...

  3. dos下循环复制一张图片的bat

    @echo off setlocal enabledelayedexpansion ,,) do ( @echo !dm! copy .png !dm!.png ) 我期待的结果是将140041.pn ...

  4. 2014年下半年计划—写博客,旅游,带女朋友拍写真

           前言:写这篇博客之前,一直在网上,看各位大牛写的博文,发布的视频等.当然由于自己的初来乍到,人生地不"熟"儿的,也吃了不少亏,走了不少弯路.本着一颗学习的心,携着向各 ...

  5. js 拼接参数

    htmlString += "<td><button type=\"button\" onclick=\"artdel('"+pro ...

  6. 可发布指定的ASP.NET页面的插件:LimusicAddin

    涉及到的技术点 VS插件开发.推荐阅读:Visual Studio 2008 可扩展性开发 asp.net 预编译.使用aspnet_comlier.exe(在目录:C:\Windows\Micros ...

  7. 解决从linux本地文件系统上传文件到HDFS时的权限问题

    当使用 hadoop fs -put localfile /user/xxx 时提示: put: Permission denied: user=root, access=WRITE, inode=& ...

  8. db2相关问题及解决方法

    DB2相关问题及解决方法: 一.DB2中的代码页(codepage)问题. DB2备份时发生过代码页错误的问题,修改代码页后备份正常,但创建数据库时又发生代码页的错误.这是DB2服务器使用的代码页配置 ...

  9. Spring切面处理

    切面类DictionaryAOP 里面有一个全局变量systemTestDomain <bean id="dictionaryAOP" class="test.Di ...

  10. XMPP即时通讯(代码实现)

    1.配置XMPP(XMPPConfig.m) 2.配置XMPPFramework框架 3.创建单例类(XMPPManager.h/XMPPManager.m)管理器 XMPPManager.m: #i ...