第一步：
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>
效果演示如下:
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
