Toon posts:

[javascript] uitbereiden menu lukt niet

Pagina: 1
Acties:
  • 41 views sinds 30-01-2008

maandag 2 augustus 2004 20:36

Acties:

Verwijderd

Topicstarter
ik heb een mooi javascript menu gevonden voor op mijn site maar nu wil ik een paar dingen die mij niet lukken.
-zo wil ik dat bij het openen van de pagina het menu geopend is.

-ook wil ik 1 knop maken waarbij je gelijk doorgelinkt word zonder submenu. in een submenu krijg ik wel een link maar in die hoofd krijg ik het niet voor elkaar.

-en ik wil dat de hele balk wat smaller word ook dit krijg ik niet voor elkaar

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

<title>web reference</title> 
<script language="JavaScript1.2" type="text/javascript"> 
var maxmnus = 5 
function opTab(){ 
var mnu = document.getElementById("menubar") 
var arrdiv = document.getElementById("arrow") 
var arrtxt = document.getElementById("arr") 
if((mnu.style.display != "block") || (mnu.style.display == "")){ 
mnu.style.display = "block" 
arrdiv.style.pixelLeft = mnu.style.width.substring(0 , mnu.style.width.length - 2) 
arrtxt.innerText = "3"; 
} else { 
mnu.style.display = "none" 
arrtxt.innerText = "4"; 
arrdiv.style.pixelLeft = 0; 
} 
event.cancelBubble = true; 
} 

function toggleMenu(el){ 
for(var i = 0;i < maxmnus;i++) document.getElementById(document.getElementById("c" + i).menu).style.display = "none"; 
if(el.status == "closed"){ 
el.status = "open" 
document.getElementById(el.menu).style.display = "block"; 
} else { 
el.status = "closed" 
} 
} 

function toggleSub(e){ 
el = document.getElementById(e) 
if(el.status == "closed"){ 
el.style.display = "block"; 
el.status = "open" 
} else { 
el.style.display = "none"; 
el.status = "closed" 
} 
event.cancelBubble = true; 
} 
</script> 
<style type="text/css"> 
#menubar{position:absolute;top:0px;left:0px;display:none;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;cursor:hand;z-index:5;background-image:url(mnu.jpg);background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');} 
.indicator{color:#b24426;font-family:Webdings;font-weight:bold;font-size:10px;} 
.r1{position:relative;top:10px;left:5px;width:213px;color:#e7e8f1;border-left:#e7e8f1 2px outset;border-top:#e7e8f1 2px outset;border-right:#e7e8f1 2px outset;border-bottom:#e7e8f1 2px outset;padding-left:5px;padding-top:1px;adding-right:5px;padding-bottom:1px;background-image:url(mnu.jpg);background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');} 
.submenu1{position:relative;top:0px;left:0px;height:95%;width:100%;border-left:#e0f8e3 2px inset;border-top:#e0f8e3 2px inset;border-right:#e0f8e3 2px inset;border-bottom:#e0f8e3 2px inset;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;display:none;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-color:#cff1d4;background-image:url(sub.jpg);background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');} 
.submenu2{position:relative;top:0px;left:0px;width:90%;border-left:#e0f8e3 3px groove;border-top:#e0f8e3 3px groove;border-right:#e0f8e3 3px groove;border-bottom:#e0f8e3 3px groove;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;margin-top:4px;display:none;background-color:#cff1d4;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-image:url(sub.jpg);background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');} 
.pulltab{position:absolute;top:0px;left:0px;height:100%;width:20px;padding-left:2px;cursor:hand;color:#2644b2;font-family:Webdings;font-weight:bold;font-size:10px;z-index:5;background-image:url(tab.jpg);background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#e7e8f1', endColorstr='#2644b2');} 
.inner{height:100%;width:100%;} 
.mtab{position:relative;top:0px; 
.btninner{height:100%;width:100%;} 
.fr{position:absolute;top:0px;left:30px;} 
</style> 
<div id="menubar" style="; HEIGHT: expression(document.body.offsetHeight); WIDTH: 223px"> 
<div id="c0" class="r1" onclick="toggleMenu(this)" status="closed" menu="m0"> 
<div id="cbtn" class="btninner">Behaviors</div> 
<div class="mtab"> 
<table id="m0" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"> 
<tr><td onclick="opTab();">DHTML Behaviours</td></tr> 
<tr><td onclick="opTab();">HTC Reference</td></tr> 
<tr><td onclick="opTab();">Element Behaviors</td></tr> 
<tr><td onclick="toggleSub('m0s0');">ViewLink Overview<span class="indicator">6</span> 
<table id="m0s0" class="submenu2" align="center" border="0" cellspacing="0" cellpadding="0" status="closed"> 
<tr><td onclick="opTab();">ViewLink CSS Inheritance</td></tr> 
</table></td></tr> 
<tr><td onclick="opTab();">Default Behaviors Reference</td></tr> 
<tr><td onclick="opTab();">Behaviors Library</td></tr> 
<tr><td onclick="opTab();">Using DHTML behaviors</td></tr> 
<tr><td onclick="opTab();">Implementing DHTML Behaviors in Script Using HTML Components</td></tr> 
</table> 
</div> 
</div> 
<div id="c1" class="r1" onclick="toggleMenu(this)" status="closed" menu="m1"> 
<div id="cbtn" class="btninner">CSS</div> 
<div> 
<table id="m1" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"> 
<tr><td onclick="opTab();">A Coast-to-Coast Cascade of Style Sheets</td></tr> 
<tr><td onclick="opTab();">Using Cascading Style Sheets</td></tr> 
<tr><td onclick="opTab();">Controlling Presentation with Measurement and Location Properties</td></tr> 
<tr><td onclick="opTab();">A User's Guide to Style Sheets</td></tr> 
<tr><td onclick="opTab();">Cascading Style Sheets in Internet Explorer 4.0</td></tr> 
<tr><td onclick="opTab();">New in CSS, Level 2</td></tr> 
<tr><td onclick="opTab();">CSS Positioning</td></tr> 
<tr><td onclick="opTab();">Linked Style Sheets</td></tr> 
<tr><td onclick="opTab();">Using Vertical Layout in Internet Explorer 5.5</td></tr> 
<tr><td onclick="opTab();">CSS Attributes Reference</td></tr> 
<tr><td onclick="opTab();">CSS Length Units Reference</td></tr> 
<tr><td onclick="opTab();">Tips</td></tr> 
</table> 
</div> 
</div> 
<div id="c2" class="r1" onclick="toggleMenu(this)" status="closed" menu="m2"> 
<div id="cbtn" class="btninner">DHTML</div> 
<div> 
<table id="m2" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"> 
<tr><td>DHTML 1</td></tr> 
<tr><td>DHTML 2</td></tr> 
<tr><td>DHTML 3</td></tr> 
<tr><td>DHTML 4</td></tr> 
<tr><td>DHTML 5</td></tr> 
<tr><td>DHTML 6</td></tr> 
<tr><td>DHTML 7</td></tr> 
<tr><td>DHTML 8</td></tr> 
<tr><td>DHTML 9</td></tr> 
<tr><td>DHTML 10</td></tr> 
<tr><td>DHTML 11</td></tr> 
<tr><td>DHTML 12</td></tr> 
</table> 
</div> 
</div> 
<div id="c3" class="r1" onclick="toggleMenu(this)" status="closed" menu="m3"> 
<div id="cbtn" class="btninner">DOM</div> 
<div> 
<table id="m3" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"> 
<tr><td>DOM 1</td></tr> 
<tr><td>DOM 2</td></tr> 
<tr><td>DOM 3</td></tr> 
<tr><td>DOM 4</td></tr> 
<tr><td>DOM 5</td></tr> 
<tr><td>DOM 6</td></tr> 
<tr><td>DOM 7</td></tr> 
<tr><td>DOM 8</td></tr> 
<tr><td>DOM 9</td></tr> 
<tr><td>DOM 10</td></tr> 
<tr><td>DOM 11</td></tr> 
<tr><td>DOM 12</td></tr> 
</table> 
</div> 
</div> 
<div id="c4" class="r1" onclick="toggleMenu(this)" status="closed" menu="m4"> 
<div id="cbtn" class="btninner">HTML</div> 
<div> 
<table id="m4" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"> 
<tr><td>HTML 1</td></tr> 
<tr><td>HTML 2</td></tr> 
<tr><td>HTML 3</td></tr> 
<tr><td>HTML 4</td></tr> 
<tr><td>HTML 5</td></tr> 
<tr><td>HTML 6</td></tr> 
<tr><td>HTML 7</td></tr> 
<tr><td>HTML 8</td></tr> 
<tr><td>HTML 9</td></tr> 
<tr><td>HTML 10</td></tr> 
<tr><td>HTML 11</td></tr> 
<tr><td>HTML 12</td></tr> 
</table> 
</div> 
</div> 
</div> 
<div id="arrow" class="pulltab" onclick="opTab()"><table class="inner"><tr><td id="arr" valign="middle">4</td></tr></table></div>

maandag 2 augustus 2004 21:23

Acties:
  • Cartman!
  • Registratie: April 2000
  • Niet online

Cartman!

lees asjeblieft de FAQ....

topic report gedaan...

[rml][ W&G FAQ] Welkom in W&G: FAQ en Beleid[/rml]

het is NIET de bedoeling om hier een andermans script te pasten die je zelf niet begrijpt en dat wij je mogen uitleggen hoe je em uitbreid of wijzigd naar jouw behoeften.

[ Voor 70% gewijzigd door Cartman! op 02-08-2004 21:24 ]

maandag 2 augustus 2004 21:31

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:37

crisp

Devver

Pixelated

dit is inderdaad een scriptrequest zo, of in ieder geval 'kan iemand voor mij even...'
Hier in W&G zijn we er trots op als we zelf iets maken, of in elk geval de moeite nemen iets te begrijpen. Dat laatste laat je zien door ook uit te leggen wat je al geprobeert hebt en waarom je daarmee niet het gewenste resultaat bereikt. Dat mis ik dus in je post.

en g00fy: laat de modspeak maar aan ons over
topic report gedaan...
hoef je al helemaal niet te melden in het topic zelf

[ Voor 49% gewijzigd door crisp op 02-08-2004 21:34 ]

Intentionally left blank

Dit topic is gesloten.