js写二级导航要点

1.ul li

2.js获取元素

3.setInterval(function(),time);

代码如下

 <style type="text/css">

 ul,li,body{margin:0;padding: 0;}

 #nav{width: 500px;margin: 10px auto;}

     ul li{list-style: none;}

     .clear{clear: both;}

     #nav>li{float: left;position: relative;}

     li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}

     li a:hover{background: #c66;color: #fff;}

     li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}

 </style>

 <body>

     <ul id="nav">

         <li>

             <a href="#">一级菜单</a>

             <ul class="subNav">

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

             </ul>

         </li>

         <li>

             <a href="#">一级菜单</a>

             <ul class="subNav">

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

             </ul>

         </li>

         <li><a href="#">一级菜单</a></li>

         <li><a href="#">一级菜单</a></li>

         <li><a href="#">一级菜单</a></li>

         <div class="clear"></div>

     </ul>

     <script type="text/javascript">

     var nav=document.getElementById("nav");

     var oLi=nav.getElementsByTagName("li");

     //console.log(oLi.length);

     for(var i=0;i<oLi.length;i++){

         oLi[i].onmouseover=function(){

             var oUl=this.getElementsByTagName("ul")[0];

             if(oUl){

                 var This=oUl;

                 clearInterval(This.time);

                 This.time=setInterval(function(){

                     This.style.height=This.offsetHeight+10+"px";

                     if(This.offsetHeight>=150){

                         clearInterval(This.time);

                     }

                 },10);

             }

         }

         oLi[i].onmouseout=function(){

             var oUl=this.getElementsByTagName("ul")[0];

             if(oUl){

                 var This=oUl;

                 clearInterval(This.time);

                 This.time=setInterval(function(){

                     This.style.height=This.offsetHeight-10+"px";

                     if(This.offsetHeight<=0){

                         clearInterval(This.time);

                     }

                 },10);

             }

         }

     }

     </script>

遇到的几个问题：

1，写的时候setInterval忘了写第二个时间参数，结果在火狐里出现了二级导航显示不全的问题；

2，忘记注释掉console.log(),在IE6 7 8 9里二级导航不出来，注释掉后就好了。

Note：IE 9开始 才支持  console.log

js二级导航的更多相关文章

  1. js二级导航下拉菜单

    <!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...

  2. JS写的二级导航栏（利用冒泡原理）

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

  3. JS实现轮播图特效（带二级导航）

    按照国际惯例先放效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery-menu-aim插件实现二级导航

    jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码: $(function () ...

  6. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  7. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

  8. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  9. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

随机推荐

  1. MTK+高通方案商

    1.德信无线通讯科技有限公司 点击打开链接 2.深圳优美科技

  2. FreeSWITCH第三方库（其他）的简单介绍（三）

    FreeSWITCH使用了大量的第三方库,本文档主要介绍关联相关库的信息: 音频相关库的信息介绍参考:http://www.cnblogs.com/yoyotl/p/5486753.html 视频相关 ...

  3. 将NuGet配置到环境变量中

    https://docs.nuget.org/consume/command-line-reference Installing The NuGet command line may be insta ...

  4. genome MuSic安装

    系统:ubuntu 15.04全程在root权限下安装 首先安装软件samtools ,必须是samtools-0.1.19 版本tar jxf samtools-0.1.19.tar.bz2cd s ...

  5. 职责链模式，chain of responsibility

    定义: 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连城一条链,并沿着这条链传递该请求,知道有一个对象处理它为止. 客户端并不知道哪个对象会最终处理这个请求,这样 ...

  6. 内部使用final参数的原因

    局部内部类(即:定义在方法中的内部类),访问方法中的局部变量 : 局部变量的生命周期与对象的生命周期的不一致性!方法在执行完方法的局部变量就消失,而内部类如果有引用还是存在的,那么将找不到变量.此时设 ...

  7. netty概念

    Netty的ChannelFuture在Netty中的所有的I/O操作都是异步执行的,这就意味着任何一个I/O操作会立刻返回,不保证在调用结束的时候操作会执行完成.因此,会返回一个ChannelFut ...

  8. (转)Web自动化测试中的接口测试

    1.背景 1.1 Web程序中的接口 1.1.1 典型的Web设计架构 web是实现了基于网络通信的浏览器客户端与远程服务器进行交互的应用,通常包括两部分:web服务器和web客户端.web客户端的应 ...

  9. apiCloud中图片裁剪模块FNImageClip的使用

    思路 1.获取需裁剪图片的地址 2.跳转到裁剪页面 3.裁剪成功返回新图片地址 4.替换原有图片地址 增加修饰和事件 str += '<li class="tu image" ...

  10. surfaceview介绍

    [1]surfaceview 控件是一个重量级控件      [2]内部维护了2个线程     A 获取数据  负责显示     B 负责显示  获取数据      [3]他可以直接在子线程更新ui ...