风声 JS 菜单树 V1.00 [Fonshen JS MenuTree Version 1.00]

_MenuTree对象[结构样式]

　　_MenuTree 对象的 ClassName 属性决定了菜单树的风格，“综合测试”提供的样式表包含了 4 种风格（ClassName分别为：CSDN,MSDN,EC21,WINXP）。一般情况下，我们可以直接拿来使用或稍作修改；但是如果我们想自定义完全不同的菜单树风格时，您需要了解菜单树的结构和样式规则。
　　我们举一个例子：
<script type="text/javascript">
//<![CDATA[

// ---- 定义菜单 ---- //
// 格式[层,菜单文字,链接,Title,图标,Target]
var arrData = new Array(
	[0,"Node 01","#"],
		[1,"Node 02","#"],
		[1,"Node 03","#"]
);

// ---- 创建目录树 ---- //
var MSDN = new _MenuTree("MSDN", arrData, "../demo/images/MSDN/");
MSDN.Draw();

//]]>
</script>
　　上面的菜单树 MSDN.Draw() 后生成的网页结构如下图，下右表格对图中的标签及其样式做了简单说明。
struct
  标签 样式名/说明
① div 菜单树的ClassName
① div MT_L1 LAST
若不为该层最后，则为：
MT_L1
② p MT_L0_HEADER
② p MT_L1_HEADER
③ ul MT_L0_BODY
③ ul MT_L1_BODY
④ p MT_L0_FOOTER
④ p MT_L1_FOOTER
⑤ li  
⑤ li  
⑥ p MT_L0_ITEM 项激活时：
MT_L0_ITEM
MT_L0_ITEM_ACTIVE
⑥ p MT_L1_ITEM（同上）
⑦ img 相应层最后一个图标
图标名 = LastIconName
⑦ img
⑦ img 图标名 = IconName
⑧ a 无链接时：NONE
链接激活：ACTIVE
⑧ a
　　为了可以实现丰富的效果以上结构稍微有点复杂，不过还算清晰明了：
  1. 菜单树每一层（①）由Header（②）、Body（③）、Footer（④）组成，其中 Body 是一个 ul 标签;
  2. Body（③）内包含该层得所有菜单项 Item（⑤），Item 具体内容再由一个 p（⑥）包围；
  3. Item（⑤）具体内容包含一个图标（⑦）和一个链接（⑧）；
  4. 每层循环以上结构，通过标签可以定义某些通用样式，通过样式可以单独定义某一层结构的样式。
　　我们了解了以上结构与样式对应的关系后，基本上可以实现自己需要的各种效果，具体应用中也有一些技巧，继续分析上例： 
/* ---- MSDN 目录树样式 ---- */
/* ① 的样式，定义了菜单树最外层的效果 */
.MSDN {
	margin: 0px 0px 0px 13px;/* 边距 */
	padding: 8px;
	width: 166px;/* 宽度 */;
	background-color: #f1f1f1;/* 背景 */;
	border: 1px gray solid;
}

/* ---- 第一部分为通用样式 ---- */
.MSDN * { margin: 0px; padding: 0px; } /* 将菜单树内所有标签 margin padding 都为 0 */
.MSDN ul { list-style-type: none; } /* 去掉菜单树内列表的默认显示方式 */
.MSDN li {
	margin-top: 1px !important;/* Firefox修正 */
	margin-top: 2px;/* IE6修正 */
}
.MSDN div {	padding-left: 20px; } /* div 标签对应一个层，这里次第缩进20像素来显示区别各层 */
.MSDN img { vertical-align: middle; } /* 将图标居中对齐 */
.MSDN a { /* 菜单树中链接的效果 */
	margin-left: 2px;
	padding: 1px 2px 0px 2px;
	cursor: pointer;
	color: #000000;
	font-size: 12px;/* 字号 */
	line-height: 12px;/* 行距 */
	text-decoration: none;
	border: 1px #f1f1f1 solid;
}
.MSDN a:hover { /* 菜单树中链接的效果 */
	border: 1px #999999 solid;
	background-color: #cccccc;
}
.MSDN a.ACTIVE { /* 链接被激活时的通用样式，注意是 a.ACTIVE，不是 a:ACTIVE */
	color: #ffffff; 
	border: 1px #999999 solid;
	background-color: #cccccc;
}
.MSDN a.NONE { color: #888888; } /* 菜单项没链接时的样式，如果没定义同链接样式 */

/* ---- 第二部分为单独某一层的样式 ---- */
/* 这里我们发现第二部分丰富的样式标签我们几乎都没用到就实现了我们的效果；
   当然这是因为我们这个效果比较有规律，如果要实现一些特殊的效果，其他样式
   标签就需要分别定义起来，具体可以参考“综合测试”提供的其他样式 */
/* ---- MT_L0 ---- */
.MSDN .MT_L0 { padding-left: 0px; } /* 将第0层缩进改为0像素*/
/* ---- MSDN 目录树样式 ---- */
　　现在我们来查看最终效果：