a hover internet explorer
Ik heb een verticaal menu, welke met een mouseover moeten uitklappen, menutje ernaast met links verschijnen, en met mouseout weer verdwijnen. Dit zou moeten geschieden met a hover.
Firefox is goed, alleen bij internet explorer blijft het menu uitgeklapt als ik er op klik. En dat moet niet.
De hover functie werkt dan niet meer, waarschijnlijk een fout in het javascript.
Het gaat om deze scripts:
Het javascript voor internet explorer voor de hoverfunctie:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
?>
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
?>
Zo de opbouw van het menu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
<div id="menu_left">
<ul id="nav">
<li><a href="#">Main item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>
</li>
</ul>
</div>
?>
<div id="menu_left">
<ul id="nav">
<li><a href="#">Main item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>
</li>
</ul>
</div>
?>
En hier de css:
Code (php)
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
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
<?php
#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
#nav{
width: 95px;
}
#nav li{
width: 95px;
}
#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}
* html #nav ul{
margin: -23px 0 0 95px;
}
#nav li li{
width: 100px;
}
#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}
* html #nav ul ul{
margin: -23px 0 0 100px;
}
#nav li li li{
width: 140px;
}
#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}
#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}
#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}
#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}
#nav a:link, #nav a:visited{
background: green;
border: 1px solid green;
color: silver;
}
#nav a:hover, #nav a:active{
background: green;
border: 1px solid silver;
color: silver;
}
/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid silver;
}
* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
?>
#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
#nav{
width: 95px;
}
#nav li{
width: 95px;
}
#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}
* html #nav ul{
margin: -23px 0 0 95px;
}
#nav li li{
width: 100px;
}
#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}
* html #nav ul ul{
margin: -23px 0 0 100px;
}
#nav li li li{
width: 140px;
}
#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}
#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}
#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}
#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}
#nav a:link, #nav a:visited{
background: green;
border: 1px solid green;
color: silver;
}
#nav a:hover, #nav a:active{
background: green;
border: 1px solid silver;
color: silver;
}
/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid silver;
}
* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
?>
Er zit dus ergens een fout in. Ik kan m niet meer ontdekken.
Gewijzigd op 01/01/1970 01:00:00 door Mark moes
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Zet dat is in je <head></head> tags
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#nav li {
width: 95px;
position: relative;
}
#nav li a {
display: block;
}
#nav ul {
position: absolute;
left: -900em;
top: 0;
}
#nav li:hover ul,
#nav li.hover ul {
left: 95px;
}
width: 95px;
position: relative;
}
#nav li a {
display: block;
}
#nav ul {
position: absolute;
left: -900em;
top: 0;
}
#nav li:hover ul,
#nav li.hover ul {
left: 95px;
}
Dit is het idee, daarna alleen nog opmaken. Je hebt geen hacks nodig.
Alleen een javascriptje die zorgt dat de li een class hover krijgt wanneer je erover heen gaat, dit voor ie6.
Ik heb het idee dat het javascriptje niet klopt, of anders niet volledig wordt aangeroepen in de <li> tag.