JavaScript横向二级导航菜单效果

JavaScript横向二级导航菜单效果属于前端实例代码，有关更多实例代码大家可以查看。

关于导航菜单的更多内容可以导航菜单版块去下载。

比较常见的菜单有二级下拉菜单或者侧栏菜单，本章节分享一段横向二级导航菜单，并介绍一下他的实现过程。

代码实例如下：

上面的代码实现了我们的要求，点击主导航可以在右侧显示出二级导航来。

一.代码注释:

（1）.function ShowMenu(){}，此函数可以做一些相关的准备工作，具体内容下面会做介绍。

（2）.var barCTT=document.getElementById("dNavBar")，获取id属性值为dNavBar的元素。

（3）.var liArr=barCTT.getElementsByTagName("li"),获取barCTT元素下的所有li元素对象集合。

（4）.var links=new Array()，声明一个数组，用来存储二级导航菜单，每一个数组元素对应一个主导航。

（5）.for (var index=0;index<liArr.length;index++)，遍历li元素集合中的每一个元素。

（6）.liArr[index].onclick=function(){

  selectThis(this,liArr,links)

}，然后为每一个li元素注册onclick事件处理函数，事件处理函数会调用selectThis()函数。

（7）.function selectThis(indexObj,allLi,infoArr){}，此函数可以实现定义当前li元素的一些样式，第一个参数是当前点击的li元素对象，第二个参数是li元素集合，第三个参数是二级导航菜单数组。

（8）.var index=0，声明一个变量并赋值为0，其实用来确定数组的索引。

（9）.for (y=0;y<allLi.length;y++),遍历集合中的每一个元素。

（10）.allLi[y].style.border="1px solid #ffffff"，设置li元素的边框。

（11）.allLi[y].style.backgroundColor="#86C2FF"，设置li元素的背景色。

（12）.allLi[y].style.height="28px"，设置li元素的高度。

（13）.if(indexObj==allLi[y]){

  index=y;

}，如果是当前点击的li元素，那么将y的值赋值给index。

（14）.indexObj.style.borderBottom="0px solid #666688"，设置当前li元素的下边框。

（15）.indexObj.style.backgroundColor="#99cc66"，设置当前li元素的背景色。

（16）.indexObj.style.height="31px"，设置当前li元素的高度。

（17）.document.getElementById("subMenu").innerHTML=infoArr[index]，设置二级导航菜单。

二.相关阅读:

（1）.document.getElementsByTagName()参阅document.getElementsByTagName()一章节。 

（2）.innerHTML属性参阅js innerHTML一章节。