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. Windows下通过bat脚本实现自动上传文件到ftp服务器

    @Echo Off Echo open ip_address [port] >ftp.up Echo [username]>>ftp.up Echo [password]>&g ...

  2. nessus网页报错： Scans can not be saved without a policy. Please create a policy before proce

    Policies添加一个用户就好了暂时还不懂什么意思以后知道再补..............

  3. implement Cartographer ROS for TurtleBots

    github source: https://github.com/googlecartographer/cartographer_turtlebot 1. Building & Instal ...

  4. 让WinForm窗体的大小固定，不能调整大小

    窗体FormBorderStyle属性设置为:FixedSingle,再把最大化禁用就可以了

  5. hdu 5643 King's Game 约瑟夫变形

    首先约瑟夫问题的数学推理过程:我们知道第一个人(编号一定是(m-1) mod n) 出列之后,剩下的n-1个人组成了一个新的约瑟夫环(以编号为k=m mod n的人开始):k k+1 k+2 ... ...

  6. 一张png图片 上面有多个图标，如何用CSS准确的知道其中某个图片的坐标

    一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用  background background:url(images/xx.png) 40px 10px n ...

  7. [poj2785]4 Values whose Sum is 0(hash或二分)

    4 Values whose Sum is 0 Time Limit: 15000MS Memory Limit: 228000K Total Submissions: 19322 Accepted: ...

  8. 整理的一些常用的CSS HACK

     ie8以下兼容透明都和支持CSS圆角,这两个都要在服务器上才看到效果,可以本地搭建一个服务器如IIS -pie-background: rgba(255, 255, 255, 0.10);/*IE6 ...

  9. Redis高级实践之————Redis短连接性能优化

    摘要: 对于Redis服务,通常我们推荐用户使用长连接来访问Redis,但是由于某些用户在连接池失效的时候还是会建立大量的短连接或者用户由于客户端限制还是只能使用短连接来访问Redis,而原生的Red ...

  10. Codeforces 713C Sonya and Problem Wihtout a Legend

    题意:给一个序列,可以进行若干次操作,每次操作选择一个数让它+1或-1,问最少要几次操作使得序列变为严格单调递增序列. 题解:首先考虑非严格递增序列,则每个数字最终变成的数字一定是该数组中的某个数.那 ...