CSS静态页面的树形菜单
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=logo}
介绍：CSS加一小段JS实现的树形菜单，扩展性非常好，推荐！
演示：
[Ctrl+A全选 提示：你可先修改部分代码，再按运行]
下面教你如何应用此特效： 相关文件下载
--------------------------------------------------------------------------------------
需要在<body 这里>加入的代码：无
--------------------------------------------------------------------------------------
演示：
[Ctrl+A全选 提示：你可先修改部分代码，再按运行]
下面教你如何应用此特效： 相关文件下载
--------------------------------------------------------------------------------------
需要在<body 这里>加入的代码：无
--------------------------------------------------------------------------------------
以下代码加到<head>…</head>中
以下代码加到<body>…</body>中
<link type="text/css" href="/texiao/zzsc_demo/tree01/css/tree.css" rel="stylesheet">
<script language=jscript>
function ChangeStatus(o)
{
if (o.parentNode)
{
if (o.parentNode.className == "Opened")
{
o.parentNode.className = "Closed";
}
else
{
o.parentNode.className = "Opened";
}
}
}
</script>
<script language=jscript>
function ChangeStatus(o)
{
if (o.parentNode)
{
if (o.parentNode.className == "Opened")
{
o.parentNode.className = "Closed";
}
else
{
o.parentNode.className = "Opened";
}
}
}
</script>
<div class="TreeMenu" id="CategoryTree">
<h4>CSS树形菜单</h4>
<ul>
<li class="Opened"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">根节点</a>
<ul>
<li class="Opened"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">我的文档</a>
<ul>
<li class="Opened"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">JavaScript</a>
<ul>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">常用小技巧</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">围绕鼠标的文字</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">OWC图表</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">锁定表列</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">B/S常用技巧</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">操作xml</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">生成guid</a></li>
</ul></li>
</ul>
</div>
<h4>CSS树形菜单</h4>
<ul>
<li class="Opened"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">根节点</a>
<ul>
<li class="Opened"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">我的文档</a>
<ul>
<li class="Opened"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">JavaScript</a>
<ul>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">常用小技巧</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">围绕鼠标的文字</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">OWC图表</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">锁定表列</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">B/S常用技巧</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">操作xml</a></li>
<li class="Child"><img class=s src="/texiao/zzsc_demo/tree01/css/s.gif"><a href="#">生成guid</a></li>
</ul></li>
</ul>
</div>
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
- 您可以发表评论支持你喜欢的文章。
- 请遵守《互联网电子公告服务管理规定》。
- 请遵守中华人民共和国各项有关法律法规。
- 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
- 评论人需对自己在使用评论过程中的行为承担法律责任。
- 本站管理员有权保留或删除评论内容。
- 评论内容只代表个人观点，与本网站立场无关。
站内特效搜索
