Menu css ok sur IE8 --> fonction javascript pour IE6

Invité · 23/04/2009, 03h32

Bonjour a tous,

J'ai sur toutes les pages un menu principal, et sur certaines, en plus, un sous-menu :
- Sur IE8, Firefox, Safari, ... mes menus fonctionnent très bien avec le CSS seul.
- sur IE7, le menu principal passe en dessous du sous-menu (z-index n'est pas pris en compte)
- sur IE6, rien ne fonctionne.

DONC, j'essaie d'ajouter une fonction javascript pour pallier ce problème sur IE6.
(je me suis inspirer de la réponse de ce topic : http://www.developpez.net/forums/d72...rche-sous-ie6/)

Mes problèmes :
1- je ne touche pas une bille en javascript !
2- menu principal :
- la derniere rubrique ("Foyer") se décale en dessous des autres (sans que je sache pourquoi)
3- sous-menu :
- je n'arrive pas a adapter la fonction javascript pour qu'il fonctionne aussi.

BREF : j'ai grand besoin de votre aide et de vos lumières concernant le script javascript !
Merci.

test.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="test-style.css" />
</head>
<body>
<div id="contenant">
 
<div id="menu"><?php include('test-menu.php'); ?></div>
 
<div id="contenu">
<!-- CONTENU DE LA PAGE -->
<br /><br />
<div id="sousmenu"><?php include('test-sousmenu.php'); ?></div>
 
<br /><br />CONTENU DE LA PAGE<br /><br /><br />
 
<!--   FIN du CONTENU   -->
</div>
 
</div>
</body>
</html>

test-menu.php (qui contient aussi le javascript qui pose probleme)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type="text/javascript">
window.onload = function() {
    var mainmenu = document.getElementById("MainMenuNiveau1");
    var mainmenusfEls = mainmenu.getElementsByTagName("li");
    for (var i=0; i<mainmenusfEls.length; i++) {
        if (mainmenusfEls[i].className == "deroulant") {
 
            mainmenusfEls[i].onmouseover = function() {
                var uls = this.getElementsByTagName("ul");
                if (uls.length > 0) {
                    uls[0].style.display = "block";
                }
            };
            mainmenusfEls[i].onmouseout = function() {
                var uls = this.getElementsByTagName("ul");
                if (uls.length > 0) {
                    uls[0].style.display = "none";
                }
            };
        }
    };
    var sousmenu = document.getElementById("SousMenuNiveau1");
    var sousmenusfEls = sousmenu.getElementsByTagName("li");
    for (var i=0; i<sousmenusfEls.length; i++) {
        if (sousmenusfEls[i].className == "deroulant") {
 
            sousmenusfEls[i].onmouseover = function() {
                var uls = this.getElementsByTagName("ul");
                if (uls.length > 0) {
                    uls[0].style.display = "block";
                }
            };
            sousmenusfEls[i].onmouseout = function() {
                var uls = this.getElementsByTagName("ul");
                if (uls.length > 0) {
                    uls[0].style.display = "none";
                }
            };
        }
    }
};
</script>
 
<center>
<ul id="MainMenuNiveau1">
	<li class="deroulant">
		<a href="#">Actualité</a>
		<ul class="Niveau2">			      
			<li><a href="index.php">Les News</a></li>
		</ul>
	</li>
	<li class="deroulant">
		<a href="#">Sapeur Pompier</a>
		<ul class="Niveau2">			      
			<li><a href="sp-metier.php">Le Métier</a></li>
			<li><a href="sp-mission.php">Les Missions</a></li>
		</ul>
	</li>
	<li class="deroulant">
		<a href="#">CIS Marcigny</a>
		<ul class="Niveau2">			      
			<li><a href="materiel.php">Le Matériel</a></li>
			<li><a href="tenue.php">Les Tenues</a></li>
			<li><a href="cours.php">Formations</a></li>
		</ul>
	</li>
	<li class="deroulant">
		<a href="#">Médiathèque</a>
		<ul class="Niveau2">			      
			<li><a href="photo.php">Photos</a></li>
			<li><a href="video.php">Vidéos</a></li>
		</ul>
	</li>
	<li class="deroulant">
		<a href="#">Le Foyer</a>
		<ul class="Niveau2">			      
			<li><a href="livredor.php">Livre d'Or</a></li>
			<li><a href="contact.php">Contact</a></li>
		</ul>
	</li>
</ul>
</center>

test-sousmenu.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<center>
<ul id="SousMenuNiveau1">
	<li>
		<a href="#">QCM - Incendie</a>
		<ul class="Niveau2">			      
			<li><a href="QCM-incendie-tuyaux.php">QCM - Les Tuyaux</a></li>
			<li><a href="QCM-incendie-lances.php">QCM - Les Lances</a></li>
			<li><a href="QCM-incendie-pieces-jonction.php">QCM - Les Pièces de Jonctions</a></li>
		</ul>
	</li>
	<li>
		<a href="#">QCM - Secourisme</a>
		<ul class="Niveau2">			      
			<li><a href="#">... à venir ...</a></li>
		</ul>
	</li>
	<li>
		<a href="#">QCM - Divers</a>
		<ul class="Niveau2">			      
			<li><a href="QCM-divers-lspcc.php">QCM - Le LSPCC</a></li>
			<li><a href="QCM-divers-ari.php">QCM - L'ARI</a></li>
		</ul>
	</li>
	<li>
		<a href="cours.php">Formations</a>
		<ul class="Niveau2">			      
			<li><a href="cours.php">Formez-vous au métier.</a></li>
		</ul>
	</li>
</ul>
</center>

test-style.css (fonctionnent tres bien sur IE8, mal sur IE7, pas du tout sur IE6)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
/* --------------- BODY ---------------- */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	font-family: "Tahoma", Arial, sans-serif;
	color: #000000;
	font-size: 10pt;
	text-align: left;
	text-decoration: none;
}
/* --------------- MAIN ----------------- */
#contenant
{
	position : relative;
	width: 800px;
	height: auto;
}
#menu
{
	position : relative;
	left:0;
	width: 750px;
	height: 20px;
}
#sousmenu
{
	position : relative;
	left:0;
	width: 584px;
	height: 20px;
}
#contenu
{
	position : relative;
	overflow: hidden;
	text-align: left;
	width: 700px;
	height: auto;
	padding:20px;
}
/* --------------- MENU ----------------- */
/* -- 1er niveau -- */
#MainMenuNiveau1
{
	position : absolute;
	z-index: 10;
	background: #FFFFFF;
	width: 730px;
	height: 20px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#MainMenuNiveau1 li
{
	float: left;
	width: 146px;
	margin: 0;
	padding: 0;
	border: 0;
	letter-spacing:1;
	font-weight: bold;
	background: #3B4E77; /* bleu nuit */
}
#MainMenuNiveau1 li a:link, #MainMenuNiveau1 li a:visited
{
	display: block;
	height: auto;
	color: #FFFFFF;
	margin: 0;
	padding: 2px 5px;
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	text-decoration: none;
}
#MainMenuNiveau1 li a:hover { background-color: #F2462E;
}
#MainMenuNiveau1 li a:active { background-color: #5F879D; }
 
/* -- 2eme niveau -- */
#MainMenuNiveau1 .Niveau2
{
	display: none;
	position : relative;
	z-index: 11;
	list-style-type: none;
 	margin: 0;
	padding: 0;
	border: 0;
}
#MainMenuNiveau1 .Niveau2 li
{
	float: none;
	width: 146px;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	text-align: left;
	letter-spacing:1;
}
#MainMenuNiveau1 .Niveau2 li a:link, #MainMenuNiveau1 .Niveau2 li a:visited
{
	display: block;
	color: #3B4E77; /* bleu nuit */
	margin: 0;
	border: 0;
	text-decoration: none;
	background-color: #EFEFEF; /* gris clair */
}
#MainMenuNiveau1 .Niveau2 li a:hover
{
	color: #FFFFFF;
	background-color: #F2462E; /* rouge */
}
#MainMenuNiveau1 li:hover > .Niveau2 { display: block; }
 
/* ------------- SOUS-MENU -------------- */
/* -- 1er niveau -- */
#SousMenuNiveau1
{
	position : absolute;
	z-index: 8;
	background: #FFFFFF;
	width: 584px;
	height: 20px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#SousMenuNiveau1 li
{
	float: left;
	width: 146px;
	margin: 0;
	padding: 0;
	border: 0;
	letter-spacing:1;
	font-weight: bold;
	background: #3B4E77; /* bleu nuit */
}
#SousMenuNiveau1 li a:link, #SousMenuNiveau1 li a:visited
{
	display: block;
	height: auto;
	color: #FFFFFF;
	margin: 0;
	padding: 2px 5px;
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	text-decoration: none;
}
#SousMenuNiveau1 li a:hover { background-color: #F2462E;
}
#SousMenuNiveau1 li a:active { background-color: #5F879D; }
 
/* -- 2eme niveau -- */
#SousMenuNiveau1 .Niveau2
{
	display: none;
	position : relative;
	z-index: 9;
	list-style-type: none;
 	margin: 0;
	padding: 0;
	border: 0;
}
#SousMenuNiveau1 .Niveau2 li
{
	float: none;
	width: 146px;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	text-align: left;
	letter-spacing:1;
}
#SousMenuNiveau1 .Niveau2 li a:link, #SousMenuNiveau1 .Niveau2 li a:visited
{
	display: block;
	color: #3B4E77; /* bleu nuit */
	margin: 0;
	border: 0;
	text-decoration: none;
	background-color: #EFEFEF; /* gris clair */
}
#SousMenuNiveau1 .Niveau2 li a:hover
{
	color: #FFFFFF;
	background-color: #F2462E; /* rouge */
}
#SousMenuNiveau1 li:hover > .Niveau2 { display: block; }
/* -------------------------------------- */

**andry.aime** · 23/04/2009, 07h35

Salut,
essaie avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
window.onload = function() {
    for (var i=0; i<document.getElementById("MainMenuNiveau1").getElementsByTagName("li").length; i++) {
        if (document.getElementById("MainMenuNiveau1").getElementsByTagName("li").item(i).className == "deroulant") {
            document.getElementById("MainMenuNiveau1").getElementsByTagName("li").item(i).onmouseover = function() {
                if (getElementsByTagName("ul").length > 0) {
                    this.getElementsByTagName("ul").item(0).style.display = "block";
                }
            };
            document.getElementById("MainMenuNiveau1").getElementsByTagName("li").item(i).onmouseout = function() {
                if (this.getElementsByTagName("ul").length > 0) {
                    this.getElementsByTagName("ul").item(0).style.display = "none";
                }
            };
        }
    };
    for (var i=0; i<document.getElementById("SousMenuNiveau1").getElementsByTagName("li").length; i++) {
        if (document.getElementById("SousMenuNiveau1").getElementsByTagName("li").item(i).className == "deroulant") {
 
            document.getElementById("SousMenuNiveau1").getElementsByTagName("li").item(i).onmouseover = function() {
                if (this.getElementsByTagName("ul").length > 0) {
                    this.getElementsByTagName("ul").item(0).style.display = "block";
                }
            };
            document.getElementById("SousMenuNiveau1").getElementsByTagName("li").item(i).onmouseout = function() {
                if (this.getElementsByTagName("ul").length > 0) {
                    this.getElementsByTagName("ul").item(0).style.display = "none";
                }
            };
        }
    }
};

Invité · 23/04/2009, 18h40

Bonjour andry.aime, merci pour ta réponse.

Malheureusement, ca n'a pas l'air de fonctionner.

**andry.aime** · 24/04/2009, 08h20

Met le script dans le head.
Sinon essaye avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("MainMenuNiveau1").getElementsByTagName("li")[i]...

Menu css ok sur IE8 --> fonction javascript pour IE6

JavaScript

Discussions similaires

Partager

Partager