zoukankan      html  css  js  c++  java
  • js二级下拉菜单

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

    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{600px;height:500px;margin:30px auto;padding:30px;border:5px solid #ccc;background:#fff;}
            .main_nav{404px;height:30px;margin:0 auto;}
            .main_nav ul li{float:left;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;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>
    

      

  • 相关阅读:
    在日本被禁止的コンプガチャ設計
    Starling常见问题解决办法
    Flixel引擎学习笔记
    SQLSERVER中修复状态为Suspect的数据库
    T4 (Text Template Transformation Toolkit)实现简单实体代码生成
    创建Linking Server in SQL SERVER 2008
    Linq to Sql 与Linq to Entities 生成的SQL Script与分页实现
    Linq to Entity 的T4 模板生成代码
    在VisualStudio2008 SP1中调试.net framework 源代码
    使用HttpModules实现Asp.net离线应用程序
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3761415.html
Copyright © 2011-2022 走看看