垂直树形多级导航菜单代码实例
分类：实例代码
分享一段代码实例，它实现了垂直树形多级导航菜单。
更多导航菜单效果可以查阅特效代码下载板块，点击对应的分类即可。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
li a {
display: block;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #999;
padding-left: 2em;
}
.subMenu {
display: none;
margin-left: 1em;
}
.hasSub > a {
display: block;
background-image: url(a1.png);
background-repeat: no-repeat;
background-position: 10px center;
color: #666;
}
.showSubmenu > a {
background-position: 11px center;
background-repeat: no-repeat;
}
.ac {
color: #000 !important;
background-color: #efefef;
}
#tree {
margin: 100px;
width: 260px;
padding: 10px;
border: 1px solid #777;
}
</style>
<script>
window.onload = function() {
var tree = document.getElementById('tree');
var aLi = tree.getElementsByTagName('li');
var aLi_a = tree.getElementsByTagName('a');
for (var i = 0; i < aLi.length; i++) {
//标记有二级菜单的li------------------------------------
var subMenu = aLi[i].children[1]; //判断是否有二级菜单
if (subMenu) {
subMenu.className = 'subMenu';
aLi[i].className = "hasSub";
};
//绑定事件--------------------------------------------
aLi[i].show = true; //给自己增加个判断 开/关 自定义属性
aLi[i].onclick = function (ev) {
var oEv = ev || window.event;
oEv.cancelBubble = true; //阻止事件冒泡
//开关 子菜单--------------------
var subMenu = this.children[1]; //是否有二级菜单
if (this.show) { //判断开关状态
if (subMenu) {
subMenu.style.display = "block";
this.className = 'hasSub showSubmenu';
this.show = false;
}
} else {
subMenu.style.display = "none";
this.className = 'hasSub';
this.show = true;
};
//标记当前a标签------------------
for (var j = 0; j < aLi.length; j++) {
aLi_a[j].className = '';
};
this.children[0].className = 'ac';
};
};
}
</script>
</head>
<body>
<div id="tree">
<ul class="tree">
<li>
<a href="javascript:;"><i></i>前端教程网一</a>
<ul>
<li><a href="javascript:;">二级菜单</a></li>
<li><a href="javascript:;">二级菜单</a></li>
<li><a href="javascript:;">二级菜单</a></li>
<li>
<a href="javascript:;">二级菜单</a>
<ul>
<li>
<a href="javascript:;">三级菜单</a>
<ul>
<li><a href="javascript:;">四级菜单</a></li>
<li><a href="javascript:;">四级菜单</a></li>
<li>
<a href="javascript:;">四级菜单</a>
<ul>
<li><a href="javascript:;">五级菜单</a></li>
<li><a href="javascript:;">五级菜单</a></li>
<li><a href="javascript:;">五级菜单</a></li>
<li><a href="javascript:;">五级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">三级菜单</a></li>
<li><a href="javascript:;">三级菜单</a></li>
<li><a href="javascript:;">三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">二级菜单</a></li>
</ul>
</li>
<li>
<a href="javascript:;"><i></i>前端教程网二</a>
<ul>
<li><a href="javascript:;">二级菜单</a></li>
<li><a href="javascript:;">二级菜单</a></li>
<li><a href="javascript:;">二级菜单</a></li>
<li>
<a href="javascript:;">二级菜单</a>
<ul>
<li><a href="javascript:;">三级菜单</a></li>
<li><a href="javascript:;">三级菜单</a></li>
<li><a href="javascript:;">三级菜单</a></li>
<li><a href="javascript:;">三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">二级菜单</a></li>
</ul>
</li>
<li>
<a href="javascript:;">前端教程网三</a>
<ul>
<li><a href="javascript:;">二级菜单</a></li>
<li><a href="javascript:;">二级菜单</a></li>
<li><a href="javascript:;">二级菜单</a></li>
<li>
<a href="javascript:;">二级菜单</a>
<ul class="subMenu">
<li><a href="javascript:;">三级菜单</a></li>
<li><a href="javascript:;">三级菜单</a></li>
<li><a href="javascript:;">三级菜单</a></li>
<li><a href="javascript:;">三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">二级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">前端教程网四</a></li>
</ul>
</div>
</body>
</html>
垂直树形多级导航菜单代码实例，这样的场景在实际项目中还是用的比较多的，关于垂直树形多级导航菜单代码实例就介绍到这了。
垂直树形多级导航菜单代码实例属于前端实例代码，有关更多实例代码大家可以查看。