滑出式菜单
from: http://www.jscode.cn/jave_menu/31051042.htm
1 <html>
2
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 <title>网页特效|Linkweb.cn/Js|---滑出式菜单</title>
6 <style>
7 <!--
8 #ssm2 A {
9 color:black;
10 text-decoration:none;
11 font-size:12;
12 font-family:verdana;
13 }
14
15 #ssm2 A:hover {
16 color:red;
17 }
18
19
20 -->
21 </style>
22 </head>
23
24 <body>
25
26 <script language="JavaScript">
27
28 function MM_displayStatusMsg(msgStr) {
29 status=msgStr;
30 document.MM_returnValue = true;
31 }
32
33 function highlight(x){
34 document.forms[x].elements[0].focus()
35 document.forms[x].elements[0].select()
36 }
37
38 function MM_jumpMenu(targ,selObj,restore){
39 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
40 if (restore) selObj.selectedIndex=0;
41 }
42
43 var NS
44 IE=document.all;
45 NS=document.layers;
46
47
48 hdrFontFamily="Verdana";
49 hdrFontSize="2";
50 hdrFontColor="white";
51 hdrBGColor="#666666";
52 linkFontFamily="Verdana";
53 linkFontSize="2";
54 linkBGColor="white";
55 linkOverBGColor="#CCCCCC";
56 linkTarget="_top";
57 YOffset=60;
58 staticYOffset=20;
59 menuBGColor="black";
60 menuIsStatic="no";
61 menuHeader="大类菜单1"
62 menuWidth=150; // Must be a multiple of 5!
63 staticMode="advanced"
64 barBGColor="#1298fd";
65 barFontFamily="Verdana";
66 barFontSize="2";
67 barFontColor="white";
68 barText="滑出式菜单";
69
70 function moveOut() {
71 if (window.cancel) {
72 cancel="";
73 }
74
75 if (window.moving2) {
76 clearTimeout(moving2);
77 moving2="";
78 }
79 if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
80 if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
81 }
82 if (NS) {
83 document.ssm2.left += (5%menuWidth);
84 }
85
86 moving1 = setTimeout('moveOut()', 5)
87 }
88 else {
89 clearTimeout(moving1)
90 }
91 };
92
93 function moveBack() {
94 cancel = moveBack1()
95 }
96 function moveBack1() {
97 if (window.moving1) {
98 clearTimeout(moving1)
99 }
100
101 if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
102 if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
103 }
104 if (NS) {
105 document.ssm2.left -= (5%menuWidth);
106 }
107 moving2 = setTimeout('moveBack1()', 5)}
108 else {
109 clearTimeout(moving2)
110 }
111 };
112
113 lastY = 0;
114 function makeStatic(mode) {
115 if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
116 }
117 if (NS) {winY = window.pageYOffset;var NM=document.ssm2
118 }
119 if (mode=="smooth") {
120 if ((IE||NS) && winY!=lastY) {
121 smooth = .2 * (winY - lastY);
122 if(smooth > 0) smooth = Math.ceil(smooth);
123 else smooth = Math.floor(smooth);
124 if (IE) NM.pixelTop+=smooth;
125 if (NS) NM.top+=smooth;
126 lastY = lastY+smooth;
127 }
128 setTimeout('makeStatic("smooth")', 1)
129 }
130
131 else if (mode=="advanced") {
132 if ((IE||NS) && winY>YOffset-staticYOffset) {
133 if (IE) {NM.pixelTop=winY+staticYOffset
134 }
135 if (NS) {NM.top=winY+staticYOffset
136 }
137 }
138 else {
139 if (IE) {NM.pixelTop=YOffset
140 }
141 if (NS) {NM.top=YOffset-7
142 }
143 }
144 setTimeout('makeStatic("advanced")', 1)
145 }
146 }
147
148 function init() {
149 if (IE) {
150 ssm2.style.pixelLeft = -menuWidth;
151 ssm2.style.visibility = "visible"
152 }
153 else if (NS) {
154 document.ssm2.left = -menuWidth;
155 document.ssm2.visibility = "show"
156 }
157 else {
158 alert('Choose either the "smooth" or "advanced" static modes!')
159 }
160 }
161
162
163 function MM_displayStatusMsg(msgStr) {
164 status=msgStr;
165 document.MM_returnValue = true;
166 }
167 </script>
168
169 <script language="JavaScript">
170 if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
171 if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
172 tempBar=""
173 for (i=0;i<barText.length;i++) {
174 tempBar+=barText.substring(i, i+1)+"<BR>"}
175 document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
176 function addItem(text, link, target) {
177 if (!target) {target=linkTarget}
178 document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
179 function addHdr(text) {
180 document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}
181
182 //Only edit the script between HERE
183
184 addItem(' 小类菜单1', '#', '_blank');
185 addItem(' 小类菜单2', '#', '_blank');
186 addItem(' 小类菜单3', '#', '_blank');
187 addItem(' 小类菜单4', '#', '_blank');
188 addItem(' 小类菜单5', '#', '_blank');
189 addItem(' 小类菜单6', '#', '_blank');
190 addHdr('大类菜单2');
191 addItem(' 小类菜单1', '#', '_blank');
192 addItem(' 小类菜单2', '#', '_blank');
193 addItem(' 小类菜单3', '#', '_blank');
194 addItem(' 小类菜单4', '#', '_blank');
195 addItem(' 小类菜单5', '#', '_blank');
196 addItem(' 小类菜单6', '#', '_blank');
197
198
199 // and HERE! No more!
200
201 document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
202 if (IE) {document.write('</DIV>')}
203 if (NS) {document.write('</LAYER>')}
204 if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}
205
206 </script>
207 <script>
208 window.onload=init
209 </script>
210
211 </body>
212 </html>
2
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 <title>网页特效|Linkweb.cn/Js|---滑出式菜单</title>
6 <style>
7 <!--
8 #ssm2 A {
9 color:black;
10 text-decoration:none;
11 font-size:12;
12 font-family:verdana;
13 }
14
15 #ssm2 A:hover {
16 color:red;
17 }
18
19
20 -->
21 </style>
22 </head>
23
24 <body>
25
26 <script language="JavaScript">
27
28 function MM_displayStatusMsg(msgStr) {
29 status=msgStr;
30 document.MM_returnValue = true;
31 }
32
33 function highlight(x){
34 document.forms[x].elements[0].focus()
35 document.forms[x].elements[0].select()
36 }
37
38 function MM_jumpMenu(targ,selObj,restore){
39 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
40 if (restore) selObj.selectedIndex=0;
41 }
42
43 var NS
44 IE=document.all;
45 NS=document.layers;
46
47
48 hdrFontFamily="Verdana";
49 hdrFontSize="2";
50 hdrFontColor="white";
51 hdrBGColor="#666666";
52 linkFontFamily="Verdana";
53 linkFontSize="2";
54 linkBGColor="white";
55 linkOverBGColor="#CCCCCC";
56 linkTarget="_top";
57 YOffset=60;
58 staticYOffset=20;
59 menuBGColor="black";
60 menuIsStatic="no";
61 menuHeader="大类菜单1"
62 menuWidth=150; // Must be a multiple of 5!
63 staticMode="advanced"
64 barBGColor="#1298fd";
65 barFontFamily="Verdana";
66 barFontSize="2";
67 barFontColor="white";
68 barText="滑出式菜单";
69
70 function moveOut() {
71 if (window.cancel) {
72 cancel="";
73 }
74
75 if (window.moving2) {
76 clearTimeout(moving2);
77 moving2="";
78 }
79 if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
80 if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
81 }
82 if (NS) {
83 document.ssm2.left += (5%menuWidth);
84 }
85
86 moving1 = setTimeout('moveOut()', 5)
87 }
88 else {
89 clearTimeout(moving1)
90 }
91 };
92
93 function moveBack() {
94 cancel = moveBack1()
95 }
96 function moveBack1() {
97 if (window.moving1) {
98 clearTimeout(moving1)
99 }
100
101 if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
102 if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
103 }
104 if (NS) {
105 document.ssm2.left -= (5%menuWidth);
106 }
107 moving2 = setTimeout('moveBack1()', 5)}
108 else {
109 clearTimeout(moving2)
110 }
111 };
112
113 lastY = 0;
114 function makeStatic(mode) {
115 if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
116 }
117 if (NS) {winY = window.pageYOffset;var NM=document.ssm2
118 }
119 if (mode=="smooth") {
120 if ((IE||NS) && winY!=lastY) {
121 smooth = .2 * (winY - lastY);
122 if(smooth > 0) smooth = Math.ceil(smooth);
123 else smooth = Math.floor(smooth);
124 if (IE) NM.pixelTop+=smooth;
125 if (NS) NM.top+=smooth;
126 lastY = lastY+smooth;
127 }
128 setTimeout('makeStatic("smooth")', 1)
129 }
130
131 else if (mode=="advanced") {
132 if ((IE||NS) && winY>YOffset-staticYOffset) {
133 if (IE) {NM.pixelTop=winY+staticYOffset
134 }
135 if (NS) {NM.top=winY+staticYOffset
136 }
137 }
138 else {
139 if (IE) {NM.pixelTop=YOffset
140 }
141 if (NS) {NM.top=YOffset-7
142 }
143 }
144 setTimeout('makeStatic("advanced")', 1)
145 }
146 }
147
148 function init() {
149 if (IE) {
150 ssm2.style.pixelLeft = -menuWidth;
151 ssm2.style.visibility = "visible"
152 }
153 else if (NS) {
154 document.ssm2.left = -menuWidth;
155 document.ssm2.visibility = "show"
156 }
157 else {
158 alert('Choose either the "smooth" or "advanced" static modes!')
159 }
160 }
161
162
163 function MM_displayStatusMsg(msgStr) {
164 status=msgStr;
165 document.MM_returnValue = true;
166 }
167 </script>
168
169 <script language="JavaScript">
170 if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
171 if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
172 tempBar=""
173 for (i=0;i<barText.length;i++) {
174 tempBar+=barText.substring(i, i+1)+"<BR>"}
175 document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
176 function addItem(text, link, target) {
177 if (!target) {target=linkTarget}
178 document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
179 function addHdr(text) {
180 document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}
181
182 //Only edit the script between HERE
183
184 addItem(' 小类菜单1', '#', '_blank');
185 addItem(' 小类菜单2', '#', '_blank');
186 addItem(' 小类菜单3', '#', '_blank');
187 addItem(' 小类菜单4', '#', '_blank');
188 addItem(' 小类菜单5', '#', '_blank');
189 addItem(' 小类菜单6', '#', '_blank');
190 addHdr('大类菜单2');
191 addItem(' 小类菜单1', '#', '_blank');
192 addItem(' 小类菜单2', '#', '_blank');
193 addItem(' 小类菜单3', '#', '_blank');
194 addItem(' 小类菜单4', '#', '_blank');
195 addItem(' 小类菜单5', '#', '_blank');
196 addItem(' 小类菜单6', '#', '_blank');
197
198
199 // and HERE! No more!
200
201 document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
202 if (IE) {document.write('</DIV>')}
203 if (NS) {document.write('</LAYER>')}
204 if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}
205
206 </script>
207 <script>
208 window.onload=init
209 </script>
210
211 </body>
212 </html>
