CSS menu

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jer Tie

Jer Tie

04/02/2009 20:04:00
Quote Anchor link
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?

HTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<body>
<div id="menucontainer">
<div id="menu">
  <p>&nbsp;</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)
PHP script in nieuw venster Selecteer het PHP script
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
#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]-->
Gewijzigd op 01/01/1970 01:00:00 door Jer Tie
 
PHP hulp

PHP hulp

18/07/2024 01:25:39
 
Niek Weevers

Niek Weevers

04/02/2009 20:51:00
Quote Anchor link
Ik gebruik jQuery
Voeg deze regel toe
#menu li.hover ul
aan het volgende blokje
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}

Met js doe je het volgende
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){

$("#menu li").hover(
function()
{
  $(this).addClass("hover");
},
function()
{
  $(this).removeClass("hover);
});

});
 
Naam Loos

Naam Loos

04/02/2009 20:59:00
Quote Anchor link
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?

Bijna niemand gebruikt IE6 waarom zou je dan je site daar op laten werken...
 
Niek Weevers

Niek Weevers

04/02/2009 21:00:00
Quote Anchor link
Er is nog een behoorlijk percentage dat ie6 gebruikt. Dus wil je een goede site bouwen, dan dien je nog zeker rekening te houden met ie6
 
- SanThe -

- SanThe -

04/02/2009 21:01:00
Quote Anchor link
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.
 
Jer Tie

Jer Tie

04/02/2009 21:25:00
Quote Anchor link
Ontzettend bedankt Niek!

Ik ga het gelijk uitproberen!
 
Roel -

Roel -

04/02/2009 21:32:00
Quote Anchor link
<!--[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]-->

Wat ga je daar eigenlijk mee doen?
 
Jer Tie

Jer Tie

05/02/2009 22:36:00
Quote Anchor link
Tja, dat was 1 van de oplossing die zou moeten werken....
Maar dat werkte helaas niet ;-)
Dus dat kon eigenlijk weer weg...!
 
Niek Weevers

Niek Weevers

05/02/2009 22:40:00
Quote Anchor link
Dat heb je ook niet nodig.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
 
Niek Kasius

Niek Kasius

11/02/2009 12:01:00
Quote Anchor link
kijk eens naar het menu van sceneone.nl mischien dat daar wat in staat. ik heb dat ook geprobeerd, maar weet niet of dat in oudere browsers niet werkt
Gewijzigd op 01/01/1970 01:00:00 door Niek Kasius
 
Elwin - Fratsloos

Elwin - Fratsloos

11/02/2009 12:17:00
Quote Anchor link
Bramboos schreef op 04.02.2009 20:59:
Bijna niemand gebruikt IE6 waarom zou je dan je site daar op laten werken...
Ach... bijna 1 op de 5 gebruikers kan je best verwaarlozen ja...

[sip-kijkende-nee-schud-emotiocon]

Bron
 
Robert Deiman

Robert Deiman

11/02/2009 12:20:00
Quote Anchor link
@Elwin
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.


Oftewel: de data daar is wel (lichtelijk) afwijkend van de gemiddelde data..
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
 
Elwin - Fratsloos

Elwin - Fratsloos

11/02/2009 12:27:00
Quote Anchor link
@Robert
Right... dat had ik nog niet gezien... Reden des te meer om IE6 te ondersteunen! :)

Iets andere stats ook beschikbaar.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.