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. BZOJ 3171 循环格（费用流）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3171 题意: 思路:若能构成循环,则每个格子的入度出度 均为1.因此将每个点拆成两个点x ...

  2. socket,TCP/IP的理解

    TCP/IP 要想理解socket首先得熟悉一下TCP/IP协议族, TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间 ...

  3. __declspec(dllexport) & __declspec(dllimport)

    __declspec(dllexport) 声明一个导出函数,是说这个函数要从本DLL导出.我要给别人用.一般用于dll中 省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是 ...

  4. 搭建本地的git仓库

    折腾了快一天了,终于搭建成功了. 分享一下搭建的步骤: 一.GIT仓库的创建 1. adduser git 2. passwd git 此例设置git的密码为123456 3. cd /home/gi ...

  5. SSMS Tools Pack

    http://www.ssmstoolspack.com/Features Format SQL 大小写切换,只切换关键字 http://www.ssmstoolspack.com/Features? ...

  6. Python命令行解析argparse常用语法使用简介

    查看原文:http://www.sijitao.net/2000.html python中的命令行解析最简单最原始的方法是使用sys.argv来实现,更高级的可以使用argparse这个模块.argp ...

  7. poj 1265 Area (Pick定理+求面积)

    链接:http://poj.org/problem?id=1265 Area Time Limit: 1000MS   Memory Limit: 10000K Total Submissions:  ...

  8. FZU 2215 Simple Polynomial Problem（简单多项式问题）

    Description 题目描述 You are given an polynomial of x consisting of only addition marks, multiplication ...

  9. web服务器安装配置

    学习目标 javaweb概念和web资源分类 服务器的分类和常用服务器apache说明 tomcat 服务器目录结构介绍和工程发布 虚拟主机说明和配置 1.Web的概念 1.1.JavaWeb的概念 ...

  10. Thinkphp 3.2 添加 验证码 如何添加。

    1,在home模块indexController.class.php中,加入以下代码 <?php namespace Home\Controller; use Think\Controller; ...