-
Notifications
You must be signed in to change notification settings - Fork 0
/
2.html
156 lines (143 loc) · 4.21 KB
/
2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {margin: 0; padding: 0;}
h2 {font-size: 12px; font-weight: normal; height: 30px; line-height: 30px; width: 133px; padding-left: 15px;}
.active {border: 1px solid #999; height: 28px; line-height: 28px; background: #ccc; cursor: default;}
ul {width: 150px; background: #99F; border: 1px solid #888;}
li {position: relative; list-style: none; float: left;}
li.active h2 {border: 1px solid #999; height: 28px; line-height: 28px; background: #ccc; cursor: default;}
li.active span {border-color: #ccc #ccc #ccc #333;}
#menu {position: absolute; display: none;}
#menu ul {position: absolute; top: 0; left: 145px; display: none;}
span {display: block; width: 0; height: 0; border-width: 4px; border-style: solid; border-color: #99F #99F #99F #333; font-size: 0; line-height: 0; float: right; position: absolute; top: 10px; right: 15px;}
li h2.active span{border-color: #ccc #ccc #ccc #333;}
</style>
</head>
<body>
<ul id="menu">
<li><h2>显示卡属性</h2></li>
<li>
<h2>查看<span></span></h2>
<ul>
<li><h2>大图标</h2></li>
<li><h2>中等图标</h2></li>
<li><h2>小图标</h2></li>
<li><h2>自动排列图标</h2></li>
<li><h2>将图标与网格对齐</h2></li>
<li><h2>显示桌面图标</h2></li>
<li><h2>显示桌面小工具</h2></li>
</ul>
</li>
<li>
<h2>排序方式<span></span></h2>
<ul>
<li><h2>名称</h2></li>
<li><h2>类型</h2></li>
<li><h2>项目类型</h2></li>
<li><h2>修改日期</h2></li>
</ul>
</li>
<li><h2>刷新</h2></li>
<li>
<h2>图形选项<span></span></h2>
<ul>
<li><h2>屏面适应<span></span></h2>
<ul>
<li><h2>保持显示缩放比</h2></li>
</ul>
</li>
<li><h2>快捷键<span></span></h2>
<ul>
<li><h2>启用</h2></li>
<li><h2>禁用</h2></li>
</ul>
</li>
<li><h2>系统拖盘图标<span></span></h2>
<ul>
<li><h2>启用</h2></li>
<li><h2>禁用</h2></li>
</ul>
</li>
<li><h2>气球通知<span></span></h2>
<ul>
<li><h2>图形属性通知<span></span></h2>
<ul>
<li><h2>启用</h2></li>
<li><h2>禁用</h2></li>
</ul>
</li>
<li><h2>最佳分辨率通知<span></span></h2>
<ul>
<li><h2>启用</h2></li>
<li><h2>禁用</h2></li>
</ul>
</li>
</ul>
</li>
<li><h2>旋转<span></span></h2>
<ul>
<li><h2>旋转至正常</h2></li>
<li><h2>旋转至90度</h2></li>
<li><h2>旋转至180度</h2></li>
<li><h2>旋转至270度</h2></li>
</ul>
</li>
</ul>
</li>
<li><h2>个性化</h2></li>
</ul>
</body>
</html>
<script>
(function(){
var menu = document.getElementById('menu');
var lis = menu.children;
document.oncontextmenu = function(ev){
menu.style.display = "block";
menu.style.top = ev.pageY + 'px';
menu.style.left = ev.pageX + "px";
//----------------------------------------------------------------
//document.addEventListener("click",fnClick);
/*menu.addEventListener("mouseover",fnOver);
menu.addEventListener("mouseout",fnOut);*/
for(var i=0;i<lis.length;i++){
lis[i].addEventListener("mouseover",fnOver);
lis[i].addEventListener("mouseover",fnOut);
}
function fnOver(ev){
for(var i=0;i<lis.length;i++){
lis[i].children[1].style.display = 'none';
}
if(this.children[1]){console.log(this.children[1]);
this.children[1].style.display = 'block';
}
//console.log(ev.target)
ev.stopPropagation();
}
function fnOut(){
if(this.children[1]){console.log(this.children[1]);
this.children[1].style.display = 'block';
}
}
//----------------------------------------------------------------
//当打开了邮件菜单后的点击
/*function fnClick(ev){
menu.style.display = "none";
}
//鼠标移入
function fnOver(ev){
ev.target.
console.log(ev.target.nextElementSibling);
ev.stopPropagation();
}
function fnOut(){
}
*/
return false;
};
})()
</script>