QQ菜单OUTLOOK风格
1
<html>
2
<head>
3
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
4
<style type='text/css'>
5
.folder1 {}{text-align:center; background: #00A4E1; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #FFFFFF #00BBFF; cursor: hand; font-size: 9pt}
6
.folder2 {}{text-align:center; background: #20C1FF; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}
7
.foldercont{}{background: #D9ECF4; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt; cursor: default;}
8
</style>
9![](/Images/OutliningIndicators/None.gif)
10
<SCRIPT LANGUAGE=javascript>
11
onload=function(){
12
var lstr = ""
13
for (var i=0; i<30; i++) lstr+= "haha..<br>";
14
var lofolder = new outlookfolder(null,335,100,15);
15
lofolder.addfolder("菜单1","1..<br>2..");
16
lofolder.addfolder("菜单2",lstr);
17
lofolder.addfolder("菜单3");
18
lofolder.addfolder("菜单4");
19
lofolder.addfolder("菜单5");
20
lofolder.showfolderX(0);
21
}
22
//[容器,高,宽,展开速度]
23
function outlookfolder(aoP,aih,aiw,ait){
24
if (aih==null) aih=400;
25
if (aiw==null) aiw="100%";
26
if (ait==null) ait=20;
27
var loMain = document.createElement("<span style='overflow:hidden;height:"+aih+";width:"+aiw+"'></span>");
28
var lsUniqueID = loMain.uniqueID;
29
var loSlide = document.createElement("span");
30
loSlide.innerHTML = "<button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>";
31
var liContH = aih;
32
if (aoP==null){
33
document.body.appendChild(loMain);
34
document.body.appendChild(loSlide);
35
}else{
36
aoP.appendChild(loMain);
37
aoP.appendChild(loSlide);
38
}
39
//增加一个目录[名字,内容]
40
loMain.addfolder = function(str,cont){
41
var loPar = document.createElement("SPAN");
42
loPar.innerHTML = "<span onclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width:100%;height:1' class='foldercont'></span>";
43
this.appendChild(loPar);
44
loPar.children[0].innerHTML = (str==null?" ":str);
45
loPar.children[1].innerHTML = (cont==null?" ":cont);
46
liContH -= parseInt(loPar.children[0].offsetHeight);
47
}
48
//打开/关闭第x个目录夹
49
loMain.showfolderX = function(aix){
50
loMain.showme(loMain.children[aix].children[0])
51
}
52
//打开/关闭当前obj所在的目录
53
loMain.showme = function(obj){
54
if (loMain.moving) return;
55
loMain.moving = true;
56
if (obj.bOpen){
57
obj.bOpen = false;
58
loMain.closefolder(obj.parentElement.children[1]);
59
obj.className = 'folder1';
60
}else{
61
obj.bOpen = true;
62
loMain.openfolder(obj.parentElement.children[1]);
63
obj.className = 'folder2';
64
var lxfolders = loMain.children;
65
for (var i=0; i<lxfolders.length; i++){
66
var loChild = lxfolders[i].children[0];
67
if(loChild.uniqueID!=obj.uniqueID){
68
lxfolders[i].children[1].style.height=1;
69
loChild.bOpen = false;
70
loChild.className = 'folder1';
71
}
72
}
73
}
74
loMain.SlideItemsAction(obj.parentElement.children[1]);
75
}
76
//为目录内容设置Slide
77
var loSlideItem = null;
78
var lbSlideing = false;
79
loMain.SlideCilckdown = function(){ //向下滚动
80
loSlideItem.scrollTop += 2;
81
if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1)
82
}
83
loMain.SlideCilckup = function(){ //向上滚动
84
loSlideItem.scrollTop -= 2;
85
if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1)
86
}
87
loMain.SlideClickStart = function(){ //允许开始滚动
88
lbSlideing=false;
89
}
90
loMain.SlideClickStop = function(){ //强制停止滚动
91
lbSlideing=true;
92
}
93
loMain.SlideItemsAction = function(obj){
94
var loUp = loSlide.children[0];
95
var loDown = loSlide.children[1];
96
if (obj.scrollHeight<=liContH||obj.parentElement.children[0].bOpen!=true){
97
loUp.style.display="none";
98
loDown.style.display="none";
99
}else{
100
loSlideItem = obj;
101
var lxOffset = getTrueOffset(obj);
102
var lileft = lxOffset[0]+obj.offsetWidth-20;
103
var litop = lxOffset[1]+obj.offsetHeight+5;
104
with(loUp.style){
105
display="";
106
left=lileft;
107
top=litop;
108
}
109
with(loDown.style){
110
display="";
111
left=lileft;
112
top=litop+liContH-40;
113
}
114
}
115
}
116
//逐渐关闭obj所在的内容显示
117
loMain.closefolder = function(obj,ai){
118
if (ai==null) ai=liContH;
119
if (ai<ait){ obj.style.height=1; ai=1}
120
if (ai>1){
121
obj.style.height = ai;
122
ai -= ait;
123
setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1)
124
return;
125
}
126
loMain.moving = false;
127
}
128
//逐渐打开obj所在的内容显示
129
loMain.openfolder = function(obj,ai){
130
if (ai==null) ai=1;
131
if (liContH>ai){
132
obj.style.height = ai;
133
ai += ait;
134
setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1)
135
return;
136
}
137
loMain.moving = false;
138
}
139
function getTrueOffset(e){
140
var x=0; var y=0;
141
if(!e)return [x,y];
142
while(e){
143
x+=parseInt(e.offsetLeft);
144
y+=parseInt(e.offsetTop);
145
e=e.offsetParent;
146
}
147
return [x,y];
148
}
149
return loMain;
150
}
151
</SCRIPT>
152![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
22
![](/Images/OutliningIndicators/None.gif)
23
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
57
![](/Images/OutliningIndicators/InBlock.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/InBlock.gif)
65
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
68
![](/Images/OutliningIndicators/InBlock.gif)
69
![](/Images/OutliningIndicators/InBlock.gif)
70
![](/Images/OutliningIndicators/InBlock.gif)
71
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
72
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
73
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/InBlock.gif)
79
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
80
![](/Images/OutliningIndicators/InBlock.gif)
81
![](/Images/OutliningIndicators/InBlock.gif)
82
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
83
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
84
![](/Images/OutliningIndicators/InBlock.gif)
85
![](/Images/OutliningIndicators/InBlock.gif)
86
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
87
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
88
![](/Images/OutliningIndicators/InBlock.gif)
89
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
90
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
93
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
94
![](/Images/OutliningIndicators/InBlock.gif)
95
![](/Images/OutliningIndicators/InBlock.gif)
96
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
97
![](/Images/OutliningIndicators/InBlock.gif)
98
![](/Images/OutliningIndicators/InBlock.gif)
99
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
100
![](/Images/OutliningIndicators/InBlock.gif)
101
![](/Images/OutliningIndicators/InBlock.gif)
102
![](/Images/OutliningIndicators/InBlock.gif)
103
![](/Images/OutliningIndicators/InBlock.gif)
104
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
105
![](/Images/OutliningIndicators/InBlock.gif)
106
![](/Images/OutliningIndicators/InBlock.gif)
107
![](/Images/OutliningIndicators/InBlock.gif)
108
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
109
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
110
![](/Images/OutliningIndicators/InBlock.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/InBlock.gif)
113
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
114
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
115
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
116
![](/Images/OutliningIndicators/InBlock.gif)
117
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
118
![](/Images/OutliningIndicators/InBlock.gif)
119
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
120
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
121
![](/Images/OutliningIndicators/InBlock.gif)
122
![](/Images/OutliningIndicators/InBlock.gif)
123
![](/Images/OutliningIndicators/InBlock.gif)
124
![](/Images/OutliningIndicators/InBlock.gif)
125
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
126
![](/Images/OutliningIndicators/InBlock.gif)
127
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
128
![](/Images/OutliningIndicators/InBlock.gif)
129
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
130
![](/Images/OutliningIndicators/InBlock.gif)
131
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
132
![](/Images/OutliningIndicators/InBlock.gif)
133
![](/Images/OutliningIndicators/InBlock.gif)
134
![](/Images/OutliningIndicators/InBlock.gif)
135
![](/Images/OutliningIndicators/InBlock.gif)
136
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
137
![](/Images/OutliningIndicators/InBlock.gif)
138
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
139
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
140
![](/Images/OutliningIndicators/InBlock.gif)
141
![](/Images/OutliningIndicators/InBlock.gif)
142
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
143
![](/Images/OutliningIndicators/InBlock.gif)
144
![](/Images/OutliningIndicators/InBlock.gif)
145
![](/Images/OutliningIndicators/InBlock.gif)
146
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
147
![](/Images/OutliningIndicators/InBlock.gif)
148
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
149
![](/Images/OutliningIndicators/InBlock.gif)
150
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
151
![](/Images/OutliningIndicators/None.gif)
152
![](/Images/OutliningIndicators/None.gif)