CSS menu
Ik heb veel gelezen dat dit niet werkt, maar een passende oplossing heb ik niet kunnen vinden.. Is er iemand die mij kan vertellen hoe ik het IE6 probleem voor mijn menu kan oplossen?
HTML
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
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
<body>
<div id="menucontainer">
<div id="menu">
<p> </p>
<ul>
<li id="li1">
<ul>
<li id="li1-2"><a>Business</a></li>
</ul>
</li>
<li id="li2">
<ul>
<li id="li2-2"><a>Reflexologie</a></li>
</ul>
</li>
<li id="li3">
<ul>
<li id="li3-2"><a>Lypossage</a></li>
</ul>
</li>
<li id="li4">
<ul>
<li id="li4-2"><a>Workshops</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<div id="menucontainer">
<div id="menu">
<p> </p>
<ul>
<li id="li1">
<ul>
<li id="li1-2"><a>Business</a></li>
</ul>
</li>
<li id="li2">
<ul>
<li id="li2-2"><a>Reflexologie</a></li>
</ul>
</li>
<li id="li3">
<ul>
<li id="li3-2"><a>Lypossage</a></li>
</ul>
</li>
<li id="li4">
<ul>
<li id="li4-2"><a>Workshops</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
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
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
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
#menucontainer {
position:absolute;
width:350px;
left:50%;
margin-left:-175px;
float:left;
}
#menu a {
display:block;
color:#FFFFFF;
font-weight:600px;
text-align:center;
}
#menu ul li {
display:block;
position:relative;
list-style:none;
margin:3px;
padding:0px;
float:left;
height:15px;
}
#menu ul ul {
display:none;
}
#menu li:hover ul {
display:block;
position:relative;
left:0px;
top:-23px;
height:auto;
margin:0px;
padding:0px;
left:39px;
}
#li1 {
background-color:#336666;
width:60px;
}
#li1-2 {
background-color:#336666;
position:absolute;
left:-42px;
width:257px;
}
#li2 {
background-color:#FFcc66;
width:60px;
}
#li2-2 {
background-color:#FFcc66;
left:-109px;
width:257px;
}
#li3 {
background-color:#999933;
width:60px;
}
#li3-2 {
background-color:#999933;
width:257px;
left:-174px;
}
#li4 {
background-color:#3399cc;
width:60px;
}
#li4-2 {
background-color:#3399cc;
width:257px;
left:-240px;
}
<!--[if gt IE 5.0]><![if lt IE 7]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
#menu li { /* the behaviour to mimic the li:hover rules in IE 5+ */
behavior: url( IEmen.htc );
}
#menu ul ul { /* copy of above declaration without the > selector, except left position is wrong */
display: none; position: absolute; top: 2px; left: 78px;
}
</style>
<![endif]><![endif]-->
position:absolute;
width:350px;
left:50%;
margin-left:-175px;
float:left;
}
#menu a {
display:block;
color:#FFFFFF;
font-weight:600px;
text-align:center;
}
#menu ul li {
display:block;
position:relative;
list-style:none;
margin:3px;
padding:0px;
float:left;
height:15px;
}
#menu ul ul {
display:none;
}
#menu li:hover ul {
display:block;
position:relative;
left:0px;
top:-23px;
height:auto;
margin:0px;
padding:0px;
left:39px;
}
#li1 {
background-color:#336666;
width:60px;
}
#li1-2 {
background-color:#336666;
position:absolute;
left:-42px;
width:257px;
}
#li2 {
background-color:#FFcc66;
width:60px;
}
#li2-2 {
background-color:#FFcc66;
left:-109px;
width:257px;
}
#li3 {
background-color:#999933;
width:60px;
}
#li3-2 {
background-color:#999933;
width:257px;
left:-174px;
}
#li4 {
background-color:#3399cc;
width:60px;
}
#li4-2 {
background-color:#3399cc;
width:257px;
left:-240px;
}
<!--[if gt IE 5.0]><![if lt IE 7]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
#menu li { /* the behaviour to mimic the li:hover rules in IE 5+ */
behavior: url( IEmen.htc );
}
#menu ul ul { /* copy of above declaration without the > selector, except left position is wrong */
display: none; position: absolute; top: 2px; left: 78px;
}
</style>
<![endif]><![endif]-->
Gewijzigd op 01/01/1970 01:00:00 door Jer Tie
Voeg deze regel toe
#menu li.hover ul
aan het volgende blokje
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#menu li:hover ul,
#menu li.hover ul {
display:block;
position:relative;
left:0px;
top:-23px;
height:auto;
margin:0px;
padding:0px;
left:39px;
}
#menu li.hover ul {
display:block;
position:relative;
left:0px;
top:-23px;
height:auto;
margin:0px;
padding:0px;
left:39px;
}
Met js doe je het volgende
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
$("#menu li").hover(
function()
{
$(this).addClass("hover");
},
function()
{
$(this).removeClass("hover);
});
});
$("#menu li").hover(
function()
{
$(this).addClass("hover");
},
function()
{
$(this).removeClass("hover);
});
});
Jerry schreef op 04.02.2009 20:04:
Ik heb een css menu gebouwd, maar die werkt niet in IE6.
Ik heb veel gelezen dat dit niet werkt, maar een passende oplossing heb ik niet kunnen vinden.. Is er iemand die mij kan vertellen hoe ik het IE6 probleem voor mijn menu kan oplossen?
Ik heb veel gelezen dat dit niet werkt, maar een passende oplossing heb ik niet kunnen vinden.. Is er iemand die mij kan vertellen hoe ik het IE6 probleem voor mijn menu kan oplossen?
Bijna niemand gebruikt IE6 waarom zou je dan je site daar op laten werken...
phpbram schreef op 04.02.2009 20:59:
Bijna niemand gebruikt IE6 waarom zou je dan je site daar op laten werken...
Beetje onzinnige opmerking lijkt mij.
Ik ga het gelijk uitproberen!
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
#menu li { /* the behaviour to mimic the li:hover rules in IE 5+ */
behavior: url( IEmen.htc );
}
#menu ul ul { /* copy of above declaration without the > selector, except left position is wrong */
display: none; position: absolute; top: 2px; left: 78px;
}
</style>
<![endif]><![endif]-->
Wat ga je daar eigenlijk mee doen?
Maar dat werkte helaas niet ;-)
Dus dat kon eigenlijk weer weg...!
Je kunt je menu veel simpeler opbouwen. Dit kun je zo met css opmaken dat het in elke browser klopt, zonder die conditional comments.
Alleen voor ie6 heb je dus dat stukje javascript nodig.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<ul id="menu">
<li><a href="#" title="Item 1">Item 1</a></li>
<li><a href="#" title="Item 2">Item 2</a>
<ul>
<li><a href="#" title="Subitem 1">Subitem 1</a></li>
<li><a href="#" title="Subitem 2">Subitem 2</a></li>
</ul>
</li>
<li><a href="#" title="Item 3">Item 3</a></li>
</ul>
<li><a href="#" title="Item 1">Item 1</a></li>
<li><a href="#" title="Item 2">Item 2</a>
<ul>
<li><a href="#" title="Subitem 1">Subitem 1</a></li>
<li><a href="#" title="Subitem 2">Subitem 2</a></li>
</ul>
</li>
<li><a href="#" title="Item 3">Item 3</a></li>
</ul>
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
Gewijzigd op 01/01/1970 01:00:00 door Niek Kasius
Bramboos schreef op 04.02.2009 20:59:
Ach... bijna 1 op de 5 gebruikers kan je best verwaarlozen ja...Bijna niemand gebruikt IE6 waarom zou je dan je site daar op laten werken...
[sip-kijkende-nee-schud-emotiocon]
Bron
W3schools zegt zelf:
Quote:
W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.
These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.
Anyway, our data, collected from W3Schools' log-files, over a five year period, clearly shows the long and medium-term trends.
These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.
Anyway, our data, collected from W3Schools' log-files, over a five year period, clearly shows the long and medium-term trends.
Oftewel: de data daar is wel (lichtelijk) afwijkend van de gemiddelde data..
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
Right... dat had ik nog niet gezien... Reden des te meer om IE6 te ondersteunen! :)
Iets andere stats ook beschikbaar.