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

1. getByClass

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

2. setTimeout 的巧妙用法。

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  6.     <title>二级延迟菜单 - 豪情</title>
  7.     <style type="text/css">
  8.         *{margin:0;padding:0;}
  9.         body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#333;}
  10.         table{border-collapse:collapse;border-spacing:0;}
  11.         li{list-style:none;}
  12.         a:focus,input,textarea{outline-style:none;}
  13.         input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}
  14.         a{color:#0a8cd2;text-decoration:none;}
  15.         a:hover{text-decoration:underline;}
  16.         .none{display:none}
  17.         .demo{width:600px;height:500px;margin:30px auto;padding:30px;border:5px solid #ccc;background:#fff;}
  18.         .main_nav{width:404px;height:30px;margin:0 auto;}
  19.         .main_nav ul li{float:left;width:100px;height:30px;border-right:1px solid #666;position:relative;}
  20.         .main_nav ul li a{display:block;height:30px;line-height:30px;text-align:center;background:#333;color:#ccc;text-decoration:none;}
  21.         .submenu{position:absolute;left:0;top:30px;width:100px;display:none;}
  22.         .submenu dd{height:31px;}
  23.         .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;}
  24.         .main_nav ul li dd a:hover{background:#555;color:#fff;}
  25.     </style>
  26. </head>
  27. <body>
  28. <div id="content" class="demo">
  29.     <div class="main_nav hover">
  30.         <ul>
  31.             <li><a class="link" href="javascript:" title="">关于我们</a>
  32.                 <dl class="submenu">
  33.                     <dd><a href="javascript:" title="">栏目子导航1</a></dd>
  34.                     <dd><a href="javascript:" title="">栏目子导航1</a></dd>
  35.                     <dd><a href="javascript:" title="">栏目子导航1</a></dd>
  36.                     <dd><a href="javascript:" title="">栏目子导航1</a></dd>
  37.                     <dd><a href="javascript:" title="">栏目子导航1</a></dd>
  38.                 </dl>
  39.             </li>
  40.             <li><a class="link" href="javascript:" title="">新闻中心</a>
  41.                 <dl class="submenu">
  42.                     <dd><a href="javascript:" title="">栏目子导航2</a></dd>
  43.                     <dd><a href="javascript:" title="">栏目子导航2</a></dd>
  44.                     <dd><a href="javascript:" title="">栏目子导航2</a></dd>
  45.                     <dd><a href="javascript:" title="">栏目子导航2</a></dd>
  46.                     <dd><a href="javascript:" title="">栏目子导航2</a></dd>
  47.                 </dl>
  48.             </li>
  49.             <li><a class="link" href="javascript:" title="">联系我们</a>
  50.                 <dl class="submenu">
  51.                     <dd><a href="javascript:" title="">栏目子导航3</a></dd>
  52.                     <dd><a href="javascript:" title="">栏目子导航3</a></dd>
  53.                     <dd><a href="javascript:" title="">栏目子导航3</a></dd>
  54.                     <dd><a href="javascript:" title="">栏目子导航3</a></dd>
  55.                     <dd><a href="javascript:" title="">栏目子导航3</a></dd>
  56.                 </dl>
  57.             </li>
  58.             <li><a class="link" href="javascript:" title="">雁过留声</a>
  59.                 <dl class="submenu">
  60.                     <dd><a href="javascript:" title="">栏目子导航4</a></dd>
  61.                     <dd><a href="javascript:" title="">栏目子导航4</a></dd>
  62.                     <dd><a href="javascript:" title="">栏目子导航4</a></dd>
  63.                     <dd><a href="javascript:" title="">栏目子导航4</a></dd>
  64.                     <dd><a href="javascript:" title="">栏目子导航4</a></dd>
  65.                 </dl>
  66.             </li>
  67.         </ul>
  68.     </div>
  69. </div>
  70. <script type="text/javascript">
  71.     (function(window){
  72.         /**
  73.          * getElementsByClassname
  74.          * @param oParent parent ele
  75.          * @param cls classname
  76.          * @return {*}
  77.          */
  78.         function getByClass(oParent, cls){
  79.             if(document.getElementsByClassName){
  80.                 return (oParent || document).getElementsByClassName(cls);
  81.             } else {
  82.                 oParent   = oParent || document;
  83.                 var res   = [],
  84.                     child = null,
  85.                     reg   = new RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
  86.                 for(var i = 0, len = oParent.all.length; i < len; i ++){
  87.                     child = oParent.all[i];
  88.                     if(reg.test(child.className)){
  89.                         res.push(child);
  90.                     }
  91.                 }
  92.                 return res;
  93.             }
  94.         }
  95.         var content = document.getElementById('content'),
  96.             oA      = getByClass(content, 'link'),
  97.             child   = null,
  98.             timer   = null,
  99.             oDl     = getByClass(content, 'submenu');
  100.         for(var i = 0, len = oA.length; i < len; i++){
  101.             child             = oA[i];
  102.             child.index       = i;
  103.             child.onmouseover = function(){
  104.                 for(var j = 0; j < len; j++){
  105.                     oDl[j].style.display = 'none';
  106.                 }
  107.                 oDl[this.index].style.display = 'block';
  108.                 clearTimeout(timer); // 清除从 dl 移回时的定时器
  109.             }
  110.             child.onmouseout = function(){
  111.                 var that = this;
  112.                 timer    = setTimeout(function(){
  113.                     oDl[that.index].style.display = 'none';
  114.                 }, 500);
  115.             }
  116.             oDl[i].onmouseover = function(){
  117.                 clearTimeout(timer);
  118.             }
  119.             oDl[i].onmouseout = function(){
  120.                 var that = this;
  121.                 timer    = setTimeout(function(){
  122.                     that.style.display = 'none';
  123.                 }, 500);
  124.             }
  125.         }
  126.     }(window));
  127. </script>
  128. </body>
  129. </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. 【转载】Java的四种引用

    在Java中,虽然不需要程序员手动去管理对象的生命周期,但是如果希望某些对象具备一定的生命周期的话(比如内存不足时JVM就会自动回收某些对象从而避免OutOfMemory的错误)就需要用到软引用和弱引 ...

  2. CountDownLatch(闭锁)

    一.闭锁(Latch)    闭锁(Latch):一种同步方法,可以延迟线程的进度直到线程到达某个终点状态.通俗的讲就是,一个闭锁相当于一扇大门,在大门打开之前所有线程都被阻断,一旦大门打开所有线程都 ...

  3. 用gd库画矩形和椭圆

    画矩形:bool imagerectangle ( resource $image画布资源 , int $x1左上角的坐标 , int $y1 , int $x2 右下角坐标, int $y2 , i ...

  4. 在ASP中限制同一表单被多次提交

    本文介绍在ASP应用中防止用户在当前会话期间多次提交同一表单的一个简单方法.它主要由四个子程序组成,在较为简单的应用场合,你只要将这些代码放在包含文件中直接引用即可:对于那些较为复杂的环境,我们在文章 ...

  5. oc语言学习之基础知识点介绍（二）：类和对象的进一步介绍

    一.类.对象在内存中的存储 /* 内存分区: 栈:局部变量 堆:程序员自己写代码申请开辟的 程序员自己维护,编译器现在帮我们自动优化了,它在合适的给我们加上了释放空间的语句,所以我们现在写的对象不会造 ...

  6. SharePoint 学习记事（一）

    记录背景: 随着公司业务的拓展,为拿到更多的项目,让原本不太信任我们的美国大佬相信我们的实力,让在美国的销售发挥他的能力,所以公司在13年下半年筹划收购了一家美国本土的公司.大约400人的规模,这个公 ...

  7. SQL Server 错误检测与修复

    简介 在一个理想的世界中,不会存在任何数据库的损坏,就像我们不会将一些严重意外情况列入我们生活中的日常一样,而一旦这类事情发生,一定会对我们的生活造成非常显著的影响,在SQL Server中也同样如此 ...

  8. Linux中Oracle数据库备份还原

    一.备份Oracle数据库 1.使用数据库管理员账户登录 sqlplus system/system@orcl as sysdba; 2.创建备份目录,并指定备份目录(bak_dir)的物理路径 cr ...

  9. 关于懒加载(lazy loading)

    懒加载---即为延迟加载,顾名思义在需要的时候才加载,这样做效率会比较低,但是占用内存低,iOS设备内存资源有限,如果程序启动使用一次性加载的方式可能会耗尽内存,这时可以使用懒加载,先判断是否有,没有 ...

  10. 使用jQuery调用ASP.NET WebService的简易教程

    鉴于使用Javascript调用Web Service配置略麻烦,所以记录一下. 1. 新建一个Web服务(WebService.asmx) 2. 取消注释// [System.Web.Script. ...