/u/32658/crop6a3917835b95a_cropped.png?f=community)
Ik heb een javascriptje gevonden voor een slide-in menu
maar nu wil ik dit meerdere keren gebruiken op mn pagina
hoe doe ik dit met variabelen enzo?
ik wil er in totaal vier aan de linkerkant en 2 van boven
dus het kan wel wat ingewikkeld worden
pagina idee:
ik heb de comments er maar ff bij gehouden zo lang
EDIT: verkeerde code Doh!
maar nu wil ik dit meerdere keren gebruiken op mn pagina
hoe doe ik dit met variabelen enzo?
ik wil er in totaal vier aan de linkerkant en 2 van boven
dus het kan wel wat ingewikkeld worden
pagina idee:
code:
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
| <html>
<head>
<title>Got moo?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#menuShow{
position: absolute;
width: 120;
height: 200;
}
#menuSelect{
position: absolute;
width: auto;
height: auto;
}
</style>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY bgcolor="#22245E" text="#22245E" link="#22245E" vlink="#22245E" alink="#22245E" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--
Place the two <div>'s below in the <body> of your code.
(Normally, this will be immediately after the <body>
tag.) The menuShow div will contain your links; change
the text, links, and targets as needed.
//-->
<div id="menuSelect">
<table width="15" border="0" cellspacing="0" cellpadding="0" height="120">
<tr>
<td><a href="#" onClick="moveOnMenu();moveOffSelector()"> [img]"images/subbgpull.gif"[/img]</a></td>
</tr>
</table>
</div>
<div id="menuShow">
<table width="120" border="0" cellspacing="0" cellpadding="0" background="images/subbg.gif" height="200">
<tr>
<td valign="top" nowrap>
<div align="left"> <a href="http://www.codelifter.com"><br>
Menu Item A</a><br>
<a href="http://www.codelifter.com"> Menu Item B</a><br>
<a href="http://www.codelifter.com"> Menu Item C</a><br>
</div>
</td>
<td width="15" height="200" nowrap>
<p align="right"><a href="#" onClick="moveOffMenu();moveOnSelector()">[img]"images/subbgpull.gif"[/img]</a>
</td>
</tr>
</table>
</div>
<!--
Put the following script immediately *after* the
<div>'s (above) in your page. Set the variables as
indicated in the script.
//-->
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: David Sosnowski (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.
// Set Show to "yes" to show the menu on start-up.
// Set Show to "no" to show the selector on start-up.
Show ="no";
// Set OffX in pixels to a negative number
// somewhat larger than the width of the menu.
var OffX = -120;
// Set the PosX and PosY variables
// to the location on the screen where the
// menu should position (in pixels) when stopped.
var PosX = 0;
var PosY = 100;
// Usually, use the settings shown; but you can
// change the speed and the increment of motion
// across the screen, below.
var speed = 4;
var increment = 4;
var incrementNS4 = 5; // for slower NS4 browsers
// do not edit below this line
// ===========================
var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;
var MenuX = OffX;
var SelX = PosX;
var sPosX = PosX;
var sOffX = OffX;
if (Show == "yes") {
sPosX = OffX;
sOffX = PosX;
MenuX = sOffX;
SelX = sPosX;
}
if (is_NS4) {
increment = incrementNS4;
Lq = "document.layers.";
Sq = "";
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
eval(Lq+'menuShow'+Sq+'.left=sOffX');
eval(Lq+'menuSelect'+Sq+'.top=PosY');
eval(Lq+'menuShow'+Sq+'.top=PosY');
} else {
Lq = "document.all.";
Sq = ".style";
document.getElementById('menuSelect').style.left = sPosX+"px";
document.getElementById('menuShow').style.left = sOffX+"px";
document.getElementById('menuSelect').style.top = PosY+"px";
document.getElementById('menuShow').style.top = PosY+"px";
}
function moveOnMenu() {
if (MenuX < PosX) {
MenuX = MenuX + increment;
if (is_NS5up) {
document.getElementById('menuShow').style.left = MenuX+"px";
} else {
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOnMenu()',speed);
}
}
function moveOffMenu() {
if (MenuX > OffX) {
MenuX = MenuX - increment;
if (is_NS5up) {
document.getElementById('menuShow').style.left = MenuX+"px";
} else {
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOffMenu()',speed);
}
}
function moveOffSelector() {
if (SelX > OffX) {
SelX = SelX - increment;
if (is_NS5up) {
document.getElementById('menuSelect').style.left = SelX+"px";
} else {
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOffSelector()',speed);
}
}
function moveOnSelector() {
if (SelX < PosX) {
SelX = SelX + increment;
if (is_NS5up) {
document.getElementById('menuSelect').style.left = SelX+"px";
} else {
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOnSelector()',speed);
}
}
// End -->
</script>
<p>
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="images/newstop.gif" nowrap width="140" height="35" colspan="2"> </td>
<td background="images/pixmainfilltop.jpg" height="35"> </td>
<td nowrap background="images/pixmainrighttop.gif" width="77" height="35" colspan="2"> </td>
</tr>
<tr>
<td background="images/sideborder.gif" width="7" nowrap> </td>
<td width="133" bgcolor="#FF7F00"> </td>
<td bgcolor="#FF7F00" valign="top">
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><br>
<b><font size="3">Moo</font></b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">lab tInstructions
carefully and you will be up & running in no time. I provide this
in an 'as is' basis meaning I will provide support as best I can but basically
if it does not work then you will have to ask your host/server admin to
help you.</font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">All
functions are exactly the same, there is no difference apart from the
file extensions. I have updated the conversion for general release to
be more friendly because error messages still refered to .CGI files in
the old sloppy conversion that I passed on to a few people. Now they refer
to .PL files and it is no confusing.<br>
</font></p>
<font face="Verdana, Arial, Helvetica, sans-serif" size="2">Instructions
carefully and you will be up & running in no time. I provide this in
an 'as is' basis meaning I will provide support as best I can but basically
if it does not work then you will have to ask your host/server admin to
help you. </font>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">All functions
are exactly the same, there is no difference apart from the file extensions.
I have updated the conversion for general release to be more friendly
because error messages still refered to .CGI files in the old sloppy conversion
that I passed on to a few people. Now they refer to .PL files and it is
no confusing.<br>
</font></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td bgcolor="#FF7F00" width="70"> </td>
<td bgcolor="#FF7F00" width="7" background="images/sideborder.gif"> </td>
</tr>
</table>
<p>
<!-- Script Size: 5.71 KB -->
</body>
</html> |
ik heb de comments er maar ff bij gehouden zo lang
EDIT: verkeerde code Doh!
Ik weet alles over digitale toegankelijkheid, of ik weet wie het wel weet.
/u/22486/jasonbrooks2.png?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
), maar een simpel slide-in menuutje moet toch wel te doen zijn lijkt me.
)
