无序列表ul实现导航树

用无序列表ul实现导航树

 

1.首先写好一个无序列表

我这里的是两级树，给每个表取id或class方便在样式中设置标的样式

 

<div id="nav">
<ul id="navul">
	<li><b>用户圈</b>
		<ul class="hide">
			<li>所有用户</li>
			<li>好友</li>
			<li>陌生人</li>
		</ul>
	</li>
	<li><b>旅游圈</b>
		<ul class="hide">
			<li>正在征集当中</li>
			<li>我去过的地方</li>
			<li>发布旅游信息</li>
		</ul>
	</li>
	<li><b>信息</b>
		<ul class="hide">
			<li>收信箱</li>
			<li>发信箱</li>
		</ul>
	</li>	
</ul>
</div>

 然后再style中设置无序列表的样式里

 

list-style-type:none去掉每个li对象前面的点

text-decoration:none去掉超链接下面的下滑线

display:block使每个超链接对象作为一个整体呈现

#nav ul li ul li a:hover{background-color: #0000ff;}设置当鼠标放在每个超链接上面时的样式

 

 

<style type="text/css">
#nav{width:300px;height:620px;background-color:#1d50bc;margin-top:-15px}
#nav ul,#nav li{padding-top:10px;padding-left:10px}
#nav ul li{list-style-type: none;color:ffffff;font-family:宋体}
#nav ul li a{text-decoration:none;color:ffffff;font-family:宋体;
display: block; padding-right: 20px; padding-left: 20px}
#nav ul li ul li a:hover{background-color: #0000ff;}
#nav ul li ul.hide{display:none}/*隐藏，ul的class名为hide的隐藏/
#nav ul li ul.show{display:block}/*显示，ul的class名为show的显示*/ 

</style>

 

在js中写当用户点击树状列表上元素执行的操作

windows.onload()  调用 必须等到页面内包括图片的所有元素加载完毕后才能执行。

<script language="javascript">
	//两级树状菜单
	window.onload=function(){
		var ulist=document.getElementById("navul");//取出id为navul的列表
		var litem=ulist.childNodes;//得到名为navul的列表的所有子元素
		var li_ul=0;//声明一个变量li_ul
		//循环取出navul中的子元素
		for(var i=0;i<litem.length;i++){
			//判断当前的li下面是否还有ul列表
			if(litem[i].tagName=="LI"&&litem[i].getElementsByTagName("ul")[0]){
				li_ul=litem[i];//如果有的话将当前子元素赋给li_ul
				li_ul.onclick=change;//当子元素被点击时调用change方法
			}
		}
		//当点击某一子ul时的操作
		function change(){
			var liul=this.getElementsByTagName("ul")[0];//获得当前ul中标签名为ul的根元素
			if(liul.className=="hide"){//如果当前ul的class名为hide的话
				liul.className="show";//将它额名字改为show，同时它的样式也改变
			}else if(liul.className=="show"){//隐藏
				liul.className="hide";
			}
		}
	}
</script>

 效果