Ik ben het voledig met je eens. Ik gebruik ook niet graag CSS voor behaviors, behale voor a:hover. Visuele feedback is belangrijk.
Nadeel is dat als javascript uit staat de site niet bestuurbaar is. FOUT!
Dat is een vaak gehoord argument, maar een misvertand.
Ik schrijf altijd unobstructive javacript, wat er op neer komt dat javascript compleet gescheiden is van de site (geen inline mouseover). En dat de site volledig werkt zonder javascript eer ik javascript toevoeg.
Ik heb hier in de "kelder" nog een "probeersel" liggen, misschien dat ik je daarmee op weg help?
-- ik heb er even wat bij gehackt om een timeout te maken, maar de timeout krijg ik na 6 uur zoeken nog steeds niet meer aan de praat...
JS:
JavaScript:
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
| toggle_queu = new Array();
function build_menu()
{
parent_ul = document.getElementById('ul_menu');
build_menu_expander( parent_ul );
}
function build_menu_expander( parent_ul )
{
parents_li = parent_ul.getElementsByTagName('li') //Verzameling van ALLE MOGELIJKE ouders maken
for( i=0 ; i<parents_li.length ; i++ ) // Een voor een alle ouders verwerken
{
child_ul = parents_li[i].getElementsByTagName('ul'); // Verzameling van alle kinderen van deze ouder maken
if ( child_ul.length > 0 ) //Alleen verder gaan als ouder (minstens) 1 kind heeft
{
parents_li[i].getElementsByTagName('ul')[0].className = 'hide';
// Methode 1
// parents_li[i].onmouseover = function()
// {getParent(this,'li').getElementsByTagName('ul')[0].className = 'show';};
// parents_li[i].onmouseout = function()
// {getParent(this,'li').getElementsByTagName('ul')[0].className = 'hide';};
// Methode 2
parents_li[i].onmouseover = new Function("toggle_queu.push(this);toggle_queu_manager(toggle_queu,'show');");
parents_li[i].onmouseout = new Function("toggle_queu_manager(toggle_queu,'hide');");
// parents_li[i].onmouseout = new Function("toggle_queu_manager(this , 'hide');");
}
}
return true;
}
function getParent(element, parentTagName)
{
if ( ! element )
return null;
else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() )
return element;
else
return getParent(element.parentNode, parentTagName);
}
function toggle_queu_manager(toggle_queu , status)
{
if(status == 'show')
{
while ( toggle_queu.length > 1 )
{
toggle(toggle_queu[0], 'hide')
toggle_queu.shift();
}
element = toggle_queu[toggle_queu.length-1]
toggle(element, 'show')
}
else
{
// toggle(toggle_queu[0], 'hide')
setTimeout("alert('"+toggle_queu.length+"')",500)
setTimeout("toggle_queu('"+toggle_queu[0]+","+ 'hide'+"')",500)
}
}
function toggle(element, status)
{
parrent = getParent(element,'li')
menu = parrent.getElementsByTagName('ul')[0];
menu.className = status;
}
|
HTML:
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
157
158
159
160
161
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="vertical_menu.css">
<!--<link rel="stylesheet" type="text/css" href="horizontal_menu.css">-->
<script type="text/javascript" src="menu_expander.js"></script>
<title>menu expander</title>
<style type="text/css">
<!--
body{
margin:0;
padding: 0;
position:relative;
}
.content
{
width: 100%;
position:relative;
background: #ccf;
}
.menuwrapper input
{
/*display: none;*/
visibility: hidden;
}
.menuwrapper, .menuwrapper label
{
background-color: #5cc;
}
.menuwrapper li li
{
background-color: #ccc;
}
.menuwrapper li ul label
{
background-color: #5fc;
}
.menuwrapper ul ul label
{
height: 1.5em;
}
/*
.menuwrapper li li
{
padding: 0.5em 0;
}
*/
/* - - - - - - - - - - - */
.hide
{
display: none;
}
.show
{
display: block;
background-color: #500;
}
/* - - - - - - - - - - - */
-->
</style>
<script type="text/javascript">
<!--
function init_js()
{
document.getElementById('bodywrapper').className = 'bodywrapper';
document.getElementById('menuwrapper').className = 'menuwrapper';
document.getElementById('ul_menu').className = 'ul_menu';
document.getElementById('contentwrapper').className = 'contentwrapper';
document.getElementById('content').className = 'content';
build_menu()
}
-->
</script>
</head>
<body onload="init_js()">
<div id="bodywrapper">
<div id="menuwrapper">
<ul id="ul_menu">
<li>
<label><input type="checkbox" name="info_a" >info_d</label>
<ul>
<li><label><input type="checkbox" name="info_d_1">info_d_1</label>
<ul>
<li><label><input type="checkbox" name="info_d_1_1">info_d_1_1</label></li>
<li><label><input type="checkbox" name="info_d_1_2">info_d_1_2</label></li>
<li><label><input type="checkbox" name="info_d_1_3">info_d_1_3</label></li>
</ul>
</li>
<li><label><input type="checkbox" name="info_d_2">info_d_2</label>
<ul>
<li><label><input type="checkbox" name="info_d_2_1">info_d_2_1</label></li>
<li><label><input type="checkbox" name="info_d_2_2">info_d_2_2</label></li>
<li><label><input type="checkbox" name="info_d_2_3">info_d_2_3</label></li>
</ul>
</li>
<li><label><input type="checkbox" name="info_d_3">info_d_3</label>
<ul>
<li><label><input type="checkbox" name="info_d_3_1">info_d_3_1</label></li>
<li><label><input type="checkbox" name="info_d_3_2">info_d_3_2</label></li>
<li><label><input type="checkbox" name="info_d_3_3">info_d_3_3</label>
<ul>
<li><label><input type="checkbox" name="info_d_3_3a">info_d_3_3a</label></li>
<li><label><input type="checkbox" name="info_d_3_3b">info_d_3_3b</label></li>
<li><label><input type="checkbox" name="info_d_3_3c">info_d_3_3c</label></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<label><input type="checkbox" name="info_a" >info_a</label>
<ul>
<li><label><input type="checkbox" name="info_a_1">info_a_1</label></li>
<li><label><input type="checkbox" name="info_a_2">info_a_2</label></li>
<li><label><input type="checkbox" name="info_a_3">info_a_3</label></li>
</ul>
</li>
<li>
<label><input type="checkbox" name="info_b" >info_b</label>
<ul>
<li><label><input type="checkbox" name="info_b_1">info_b_1</label></li>
<li><label><input type="checkbox" name="info_b_2">info_b_2</label></li>
<li><label><input type="checkbox" name="info_b_3">info_b_3</label></li>
</ul>
</li>
<li>
<label><input type="checkbox" name="info_a" >info_c</label>
<ul>
<li><label><input type="checkbox" name="info_c_1">info_c_1</label></li>
<li><label><input type="checkbox" name="info_c_2">info_c_2</label></li>
<li><label><input type="checkbox" name="info_c_3">info_c_3</label></li>
</ul>
</li>
</ul>
</div>
<div id="contentwrapper">
<div id="content">
qsdqs
<p>
piouhpoipiu piuyhy oiu t
</p>
<div id="log"></div>
</div>
</div>
</div>
</div>
</body>
</html> |
Cascading Stylesheet:
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
| .contentwrapper
{
margin-left:160px;
z-index:0;
position:relative;
}
.menuwrapper
{
width: 160px;
float: left;
z-index: 99;
position:relative;
}
.menuwrapper ul
{
position:relative;
width:100%;
margin: 0;
padding: 0;
}
.menuwrapper li
{
list-style-type: none;
position:relative;
width: 100%;
clear: both;
}
.menuwrapper label
{
display: block;
width: 100%;
float:left;
}
.menuwrapper li ul
{
position: absolute;
left: 100%;
} |
[
Voor 3% gewijzigd door
g4wx3 op 07-04-2008 06:23
]
:strip_icc():strip_exif()/u/100070/crop5d011fa0d05d4_cropped.jpeg?f=community)
:strip_exif()/u/135682/bananadance_ascii.gif?f=community)
/u/214894/crop5baaa31f9c4ff_cropped.png?f=community)