JS菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_12959/article/details/81683439
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<meta http-equiv="Content-Language" content="gb2312" />  
<meta name="author" content="RainoXu" />    
<title></title>  
</head>  
<body>  
<style  type ="text/css">     
/*  <![CDATA[  */   
body{  
      padding:0;  
      margin:0;  
      text-align:center;  
}  
#nav{  
      padding:0;  
      margin:0 auto;  
      width:900px;  
      height:29px;  
      list-style:none;  
      position:relative;  
}  
#nav li{  
      float:left;  
      text-align:center;  
      padding-left:4px;  
      /*IE6中讨厌的bug，在IE7和FireFox中不设宽度能自动适应内部元素的宽度，IE6不行=.=!!*/  
      +width:72px;   
}  
#nav li.highlight{  
      background:url("http://www.rainoina.com/raino/UserFiles/image/douban_nav/nav_bg_l.jpg") no-repeat left top;  
}  
#nav span a{  
      text-decoration:none;  
      font:14px tahoma;  
      display:block;  
      padding-right:9px;  
      padding-left:5px;  
      height:29px;  
      line-height:29px;  
}  
#nav li.highlight a{   
      background:url("http://www.rainoina.com/raino/UserFiles/image/douban_nav/nav_bg_r.jpg") no-repeat right top;  
}  
.subNav{  
      padding:0;  
      list-style:none;  
      width:900px;  
      height:30px;  
      background:#EEF9EB;  
      border-top:#DCF5D5;  
      display:none;  
      position:absolute;  
      left:0;  
      +left:-40px;  
}  
.highlight .subNav{  
      display:block;  
}  
.subNav li{  
      height:30px;  
      line-height:30px;  
}  
.subNav a{  
      text-decoration:none;  
      font:12px tahoma;  
}  
/*  ]]>  */    
</style>    
<ul id="nav">  
      <li>  
            <span><a href="###">菜单一</a></span>  
            <ul class="subNav">  
                  <li><a href="###">1子菜单一</a></li>  
                  <li><a href="###">子菜单二</a></li>  
                  <li><a href="###">子菜单三</a></li>  
                  <li><a href="###">子菜单四</a></li>  
            </ul>  
      </li>  
      <li>  
            <span><a href="###">菜单二</a></span>  
            <ul class="subNav">  
                  <li><a href="###">2子菜单一</a></li>  
                  <li><a href="###">子菜单二</a></li>  
                  <li><a href="###">子菜单三</a></li>  
                  <li><a href="###">子菜单四</a></li>  
            </ul>    
      </li>  
      <li>  
            <span><a href="###">菜单三</a></span>  
            <ul class="subNav">  
                  <li><a href="###">3子菜单一</a></li>  
                  <li><a href="###">子菜单二</a></li>  
                  <li><a href="###">子菜单三</a></li>  
                  <li><a href="###">子菜单四</a></li>  
            </ul>  
      </li>  
      <li>  
            <span><a href="###">菜单四</a></span>  
            <ul class="subNav">  
                  <li><a href="###">4子菜单一</a></li>  
                  <li><a href="###">子菜单二</a></li>  
                  <li><a href="###">子菜单三</a></li>  
                  <li><a href="###">子菜单四</a></li>  
            </ul>    
      </li>  
</ul>  
<script type="text/javascript">  
//<![CDATA[  
//定义一个控制NAV的类  
function navSwap(navId){  
      this.obj=document.getElementById(navId);  
      this.subElement=[];  
      //把#navId的LI子节点（仅仅是子节点，不包括孙子节点）推入栈中  
      for (var i=0;i<this.obj.childNodes.length;i++){  
            if (this.obj.childNodes[i].nodeType==1){  
                  this.subElement.push(this.obj.childNodes[i]);  
            }  
      }        

      if (this.subElement.length>0){  
            //首先将第一个标签选项高亮  
            this.subElement[0].className="highlight";  
            for (var i=0;i<this.subElement.length;i++){  
                  //得到各个<span/>中的<a/>节点  
                  var tagNode=this.subElement[i].getElementsByTagName("span")[0].getElementsByTagName("a")[0];  

                  //绑定事件  
                  tagNode.onmouseover=function(){  
                        //得到#navId下的所有li，这里得到的也有来自subNav下的li，但这不影响后面的操作  
                        var allSubTag=document.getElementById(navId).getElementsByTagName("li");  
                        //找到class="highlight"的li，取消它的高亮，一旦找到就跳出循环  
                        for (var j=0;j<allSubTag.length ;j++){  
                              if (allSubTag[j].className=="highlight"){  
                                    allSubTag[j].className="";  
                                    break;  
                              }  
                        }  
                        //这里的this指向的是onmouseover时触发者<span/>中的<a/>标签，而不是类的内部成员。  
                        this.parentNode.parentNode.className="highlight";  
                  }  
            }  
      }        
}  
//生成一个控制的对象  
new navSwap("nav");  
//]]>  
</script>  
</body>  
</html>