XML：CSS基础之十二
第一步：
treeX.html
<title>CSS
树形菜单
</title>
<link href="treeX.css" rel="stylesheet" type="text/css" />
<body>
<div id="TreeMenu">
<h4>CSS
树形菜单
</h4>
<ul>
<li class="opened"><img src="img/s.gif" width="1" height="1" onClick="javascript:ChangeStatus(this);"/ ><ahref="#" onClick="javascript:ChangeStatus(this);">
根结点
</a></li>
<ul>
<li class="opened"><img src="img/s.gif" width="1" height="1" onClick="javascript:ChangeStatus(this);"/><ahref="#" onClick="javascript:ChangeStatus(this);">
新闻
</a></li>
<ul>
<li class="child"><img src="img/s.gif" width="1" height="1" /><ahref="#">
新浪
</a></li>
<li class="child"><img src="img/s.gif" width="1" height="1"/><ahref="#">CSDN</a></li>
</ul>
<li class="closed"><img src="img/s.gif" width="1" height="1"/><ahref="#"onClick="javascript:ChangeStatus(this);">
学习
</a></li>
<li class="closed"><img src="img/s.gif" width="1" height="1"/><ahref="#"onClick="javascript:ChangeStatus(this);">
体育
</a></li>
</ul>
</ul>
</div>
</body>
第二步：
treeX.css
* { margin: 0px;padding: 0px;}
body {
"
宋体
";
font-size: 12px;
text-decoration: none;
text-align: left;
margin-top: 10px;
margin-left: 20px;
}
h4 {
text-align: center;
font-size: 18px;
}
#TreeMenu{
height: 200px;
width: 300px;
background-color: #DDDDF4;
border: 1px solid #6F6FDB;
padding: 10px;
}
#TreeMenuul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 17px;
padding:0;
}
#TreeMenu li {
list-style-type: none;
padding:0;
cursor: hand;
}
#TreeMenu img
{
height: 18px;
width: 34px;
vertical-align: middle;
}
/* 顺序应为:.opened --->.closed ---> .child */
/* 各内容之间必须有空格:.#TreeMenu .opened img */
#TreeMenu .opened img {
background-image: url(img/opened.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#TreeMenu .closed img {
background-image: url(img/closed.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#TreeMenu .child img {
background-image: url(img/child.gif);
background-repeat: no-repeat;
background-position: 15px 2px;
}
#TreeMenu a , #TreeMenu a:visited {
text-decoration: none;
color: #000000;
}
.closed ul
{ display:none;}
分析
:
1、
margin-left: 17px;
/*--
实现左缩进关键部分
--*/
2、
list-style-type: none;
/*--
实现消除项目符号关键部分
--*/
3、
vertical-align: middle;
/*--
实现图文混排时的文本垂直居中关键部分
--*/
4、
background-position: 15px 2px;
/*--
实现背景图的定位
--*/
5、
.closed ul{ display:none;}
/*--
实现子菜单项的隐藏
--*/
第三步：
在
<head></head>
之间复制
JAVASCRIPT
代码（了解）
<script language=jscript>
function ChangeStatus(o)
{
if (o.parentNode)
{
if (o.parentNode.className == "opened")
{
o.parentNode.className = "closed";
}
else
{
o.parentNode.className = "opened";
}
}
}
</script>
效果演示如下:
