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. Python3基础 大于一个数的同时小于一个数

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  2. 动手动脑final

    1.回答问题 1. 下边的程序运行结果是什么? 2.   你如何解释会得到这样的输出? 3.   计算机是不会出错的,之所以得到这样的运行结果也是有原因的,那么从这些运行结果中,你能总结出Java的哪 ...

  3. ASP.NET简单登录注册实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  4. NTT

    1 问题描述FFT问题解决的是复数域上的卷积.如果现在的问题是这样:给出两个整数数列$Ai,Bj,0\leq i\leq n-1,0\leq j\leq m-1$,以及素数$P$,计算新数列$Ci=( ...

  5. 学习html5第一天

    HTMl5作为web标准的一种,在2004年诞生,web超文本应用技术工作组WHATWG将它发展起来,W3C由开始的不赞同到与WHATWG共同合作,并在2015年开始推广.并随着浏览器的不断支持和兼容 ...

  6. VIM如何将全部内容复制并粘贴到外部

    ubuntu默认安装的vim是不支持系统剪切.粘贴版的,需要执行以下安装:sudo apt-get install vim-gnome 注意要让vim支持系统粘贴板,首先执行sudo apt-get ...

  7. Spring AOP和AspectJ支持

    学了Spring之后发现我都不知道java为何物-- 在这一章中有好几节,讲的切面编程 第一节:在项目中启用Spring的AspectJ注解支持 第二节:用AspectJ注解声明aspect 第三节: ...

  8. [SAP ABAP开发技术总结]ABAP常用事务码

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. FZU 2212 Super Mobile Charger（超级充电宝）

    [Description] [题目描述] While HIT ACM Group finished their contest in Shanghai and is heading back Harb ...

  10. poj 2985 The k-th Largest Group 树状数组求第K大

    The k-th Largest Group Time Limit: 2000MS   Memory Limit: 131072K Total Submissions: 8353   Accepted ...