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一章节。

JavaScript横向二级导航菜单效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript横向二级导航菜单效果就介绍到这了。

回复

我来回复
  • 暂无回复内容