<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CMenu3</title>
<style type="text/css">
#CMenu3 {
width:160px;
background-color:#F6F6F6;
padding:1px 10px 10px 10px;
*padding:11px 10px 10px 10px;
}
#CMenu3 div {
font-weight:bold;
font-size:14px;
height:24px;
line-height:24px;
overflow:hidden;
border:#CCCCCC 1px solid;
padding-left:10px;
margin-top:10px;
}
#CMenu3 ul {
margin:0px;
padding:0px;
list-style:none;
height:0px;
overflow:hidden;
background-color:#EBEBEB;
}
#CMenu3 li {
font-size:12px;
margin-left:10px;
line-height:20px;
height:20px;
overflow:hidden;
}
</style>
<script type="text/javascript">
var Class = {
//创建类
create : function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};
Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
var $ni, $nf;
if (b.constructor != Array) { $ni = $nf = b; }
else { $ni = b[0], $nf = b[1]; }
if (a.attachEvent) a.attachEvent($ni, c);
else a.addEventListener($nf.replace(/^on/, ""), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
//删除函数
var $ni, $nf;
if (b.constructor != Array) { $ni = $nf = b; }
else { $ni = b[0], $nf = b[1]; }
if (a.detachEvent) a.detachEvent($ni, c);
else a.removeEventListener($nf.replace(/^on/, ""), c, d || false);
return c;
}
});
var CMenu3 = Class.create();
CMenu3.prototype = {
initialize : function (object, height, num) {
//初始化参数
var wc = this;
wc.menu = object;
wc.body = { title : [], content : [] };
wc.status = { "height" : height, "num" : num, i : 0, ing : false };
wc.temp = {};
wc.init();
},
init : function () {
//加载
var wc = this, body = wc.body, nodes = wc.menu.childNodes, i = 0;
for (; i < nodes.length ; i ++) {
if (nodes[i].nodeType != 1) continue;
if (nodes[i].tagName == "DIV") {
Object.addEvent(body.title[body.title.length] = nodes[i], "onclick", wc.click.bind(wc, body.title.length - 1));
} else if (nodes[i].tagName == "UL") (body.content[body.content.length] = nodes[i]).status = {
num : 1
};
}
if (body.content[0]) with (body.content[0].style) { height = "240px", overflow = "auto"; }
},
click : function (i) {
//点击
var wc = this, title = wc.body.title, content = wc.body.content;
if (i == wc.status.i) return;
content[i].status.num = 1
content[wc.status.i].status.num = -1;
if (!wc.temp[i]) wc.temp[i] = true;
if (!wc.temp[wc.status.i]) wc.temp[wc.status.i] = true;
if (!wc.status.ing) { wc.status.ing = true, wc.effect(); }
wc.status.i = i;
},
effect : function () {
//变化
var wc = this, n = wc.status.height / wc.status.num, temp = wc.temp, content, status, i;
//嘿嘿，偷懒这个没控制。。就是说。。。显示的高度和变化次数必须可以整除。。
for (i in temp) {
content = wc.body.content[i], status = content.status, num = content.offsetHeight + n * status.num;
if (num <= wc.status.height && num >= 0) {
content.style.height = num + "px";
} else {
content.style.overflow = "auto", delete temp[i];
}
}
if (i) window.setTimeout(function () { wc.effect(); }, 10);
else wc.status.ing = false;
}
}
Object.addEvent(window, "onload", function () {
var wc = new CMenu3($("CMenu3"), 240, 3);
});
</script>
</head>
<body>
<!--二级菜单 开始-->
<div id="CMenu3">
<div>大类1</div>
<ul>
<li>· 1</li>
<li>· 2</li>
<li>· 3</li>
</ul>
<div>大类2</div>
<ul>
<li>· 1</li>
<li>· 2</li>
<li>· 3</li>
<li>· 4</li>
<li>· 5</li>
</ul>
<div>大类3</div>
<ul>
<li>· 1</li>
<li>· 2</li>
<li>· 3</li>
<li>· 4</li>
<li>· 5</li>
<li>· 6</li>
<li>· 7</li>
<li>· 8</li>
<li>· 9</li>
<li>· 0</li>
<li>· 1</li>
<li>· 2</li>
<li>· 3</li>
<li>· 4</li>
<li>· 5</li>
<li>· 6</li>
<li>· 7</li>
<li>· 8</li>
<li>· 9</li>
</ul>
</div>
<!--二级菜单 结束-->
</body>
</html>