本文介绍了一个简单的树形导航菜单的实现方法，通过JavaScript控制菜单的展开与折叠，并使用CSS进行样式美化。该示例包括多个分类，如分类讨论区、社会信息等，每个分类下还有详细的子项。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>简单大方的树形导航菜单演示</title>
<STYLE type="text/css">
div {
font-size:12px;
color: #000000;
LINE-HEIGHT: 22px;
}
A {
font-size: 13px;
color: #000000;
text-decoration:none
}
A:hover {
font-size: 13px;
color: #999999
}
.red {
color: #FF0000
}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1){
debugger;
if (document.getElementById(d1).style.display == 'none') {
document.getElementById(d1).style.display = 'block'; //触动的层如果处于隐藏状态，即显示
//"t"+d1:获得单击对象对应的img元素的id，即：t1,t2,t3,t4
document.getElementById("t"+d1).src="images/folderopen.gif";
}
else {
document.getElementById(d1).style.display = 'none'; //触动的层如果处于显示状态，即隐藏
document.getElementById("t"+d1).src="images/folder.gif";
}
}
</SCRIPT>
</head>
<body>
<div style="padding-left:0px;">
<div> <A href="javascript:onClick=show('1') "> <IMG src="images/folder.gif" name="t1" id="t1" border="0" align="absmiddle">分类讨论区 </A> </div>
<div id="1" style="display:none;padding-left:15px;"> <IMG src="images/nolines_minus.gif" align="absmiddle">BBS 系统<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">共建水木<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">站务公告栏<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">妆点水木<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">申请版主 </div>
<div> <A href="javascript: onClick=show('2') "> <IMG src="images/folder.gif" name="t2" id="t2" border="0" align="absmiddle">社会信息 </A> </div>
<div id="2" style="display:none;padding-left:15px;"> <IMG src="images/nolines_minus.gif" align="absmiddle">美容品与饰品代理<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">考研资料市场<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">商海纵横<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">动物保护者<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">动物世界<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">中国风·神州各地 </div>
<div> <A href="javascript: onClick=show('3') "> <IMG src="images/folder.gif" name="t3" id="t3" border="0" align="absmiddle">休闲娱乐 </A> </div>
<div id="3" style="display:none;padding-left:15px;"> <IMG src="images/nolines_minus.gif" align="absmiddle">ASCIIArt全国转信<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">七彩水木<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">网友聚会<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">醉品人生<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">花木园艺<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">祝福 </div>
<div> <A href="javascript: onClick=show('4') "> <IMG src="images/folder.gif" name="t4" id="t4" border="0" align="absmiddle">电脑技术 </A> </div>
<div id="4" style="display:none;padding-left:15px;"> <IMG src="images/nolines_minus.gif" align="absmiddle">BBS安装管理<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">CAD技术<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">数字图像设计<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">电脑音乐制作<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">软件加密与解密<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">计算机体系结构 </div>
</div>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
