二级下拉菜单

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

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>

posted @ 2013-03-26 21:59 豪情阅读(2260) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

二级下拉菜单

公告