Disparition d'un menu déroulant sans onmouseout
Bonjour, je sais que IE et FF ne gère pas tout à fait pareil les évènemenbts Javascript. Je suis en train de faire un menu déroulant en JS et il marche nickel sous FF mais pas sous IE. Je vous laisse voir, c'est par là.
Le problème vient de la navigation dans les menus, ils disparaissent sans raison sous IE.
Voici les codes :
HTML
Code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<title>Test JS</title>
<link type="text/css" href="test_js.css" rel="stylesheet" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="test_js_ie_correctifs.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="test_js_ie6_correctifs.css" />
<![endif]-->
<script type="text/javascript" src="menu_js.js"></script>
</head>
<body>
<div id="menu">
<ul class="arbor1">
<li><img src="images/critere_recherche.gif" alt="Votre recherche" /></li>
<li onmouseover="montre('arbor_1')" onmouseout="cache('arbor_1')">
<img class="img_arbor1" src="images/bouton_marque.gif" alt="Marque" />
<ul class="arbor2" id="arbor_1">
<li><a href="#">toutes les marques</a></li>
<li><a href="#">american apparel by msr</a></li>
<li><a href="#">american retro</a></li>
<li><a href="#">inari</a></li>
<li><a href="#">iro</a></li>
<li id="last"><a href="#">mademoiselle est capricieuse</a></li>
</ul>
</li>
<li onmouseover="montre('arbor_2')" onmouseout="cache('arbor_2')">
<img class="img_arbor1" src="images/bouton_categorie.gif" alt="Catégorie" />
<ul class="arbor2" id="arbor_2">
<li><a href="#">toutes les catégories</a></li>
<li><a href="#">bijoux ›</a></li>
<li><a href="#">chemises</a></li>
<li><a href="#">robes ›</a></li>
<li id="last"><a href="#">vestes</a></li>
</ul>
</li>
<li onmouseover="montre('arbor_3')" onmouseout="cache('arbor_3')">
<img class="img_arbor1" src="images/bouton_couleur.gif" alt="Couleur" />
<ul class="arbor2" id="arbor_3">
<li><a href="#">toutes les couleurs</a></li>
<li><a href="#">blanc</a></li>
<li><a href="#">gris</a></li>
<li><a href="#">anthracite</a></li>
<li id="last"><a href="#">noir profond</a></li>
</ul>
</li>
<li onmouseover="montre('arbor_4')" onmouseout="cache('arbor_4')">
<img class="img_arbor1" src="images/bouton_prix.gif" alt="Prix" />
<ul class="arbor2" id="arbor_4">
<li><a href="#">Tous les prix</a></li>
<li><a href="#">Moins de 50 €</a></li>
<li><a href="#">De 50 € à 100 €</a></li>
<li><a href="#">De 100 € à 200 €</a></li>
<li><a href="#">De 200 € à 300 €</a></li>
<li id="last"><a href="#">Plus de 300 €</a></li>
</ul>
</li>
<li onmouseover="montre('arbor_5')" onmouseout="cache('arbor_5')">
<img class="img_arbor1" src="images/bouton_trier.gif" alt="Options de tri" />
<ul class="arbor2" id="arbor_5">
<li><a href="#">Pas de tri</a></li>
<li><a href="#">Prix croissant</a></li>
<li><a href="#">Prix décroissant</a></li>
<li><a href="#">Les plus récents</a></li>
<li id="last"><a href="#">Les plus anciens</a></li>
</ul>
</li>
<li><img src="images/separation_menu_recherche.gif" alt="rien" style="width: 120px" /></li>
<li><a href="#"><img src="images/bouton_recherche_avancee.gif" alt="Recherche avancée" /></a></li>
</ul>
</div>
<div id="galerie">Test pour voir si ça passe bien au dessus</div>
</body>
</html> |
Javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
| // JavaScript Document
function montre (liste)
{
document.getElementById(liste).style.visibility = 'visible';
}
function cache (liste)
{
document.getElementById(liste).style.visibility = 'hidden';
} |
CSS (feuille principale) :
Code:
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
| /* CSS Document */
body {
font-family: Tahoma;
font-size: 12px;
}
img {
border: 0px;
}
#menu {
width: 799px;
background-image: url(images/fond_barre_menu.gif);
background-repeat: repeat-x;
padding: 7px 0px 0px 4px;
}
.arbor1 {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.arbor1 li {
display: inline;
margin: 0px 0px 0px -4px;
padding: 0px;
}
.img_arbor1 {
cursor: pointer;
}
.arbor2 {
position: absolute;
z-index: 100;
list-style-type: none;
margin: 0px;
padding: 0px;
visibility: hidden;
}
.arbor2 li {
display: block;
margin: 0px 0px 0px 0px;
padding: 0px;
border-top: 1px solid #FF33CC;
border-left: 1px solid #FF33CC;
border-right: 1px solid #FF33CC;
}
.arbor2 li a:link, .arbor2 li a:visited {
display: block;
padding: 2px 4px;
background-color: lightpink;
color: black;
text-decoration: none;
}
.arbor2 li a:hover {
background-color: magenta;
}
#arbor_1 {
margin: -2px 0px 0px 150px;
text-transform: capitalize;
}
#arbor_2 {
margin: -2px 0px 0px 230px;
text-transform: capitalize;
}
#arbor_3 {
margin: -2px 0px 0px 322px;
text-transform: capitalize;
}
#arbor_4 {
margin: -2px 0px 0px 400px;
}
#arbor_5 {
margin: -2px 0px 0px 459px;
}
#last {
border-bottom: 1px solid #FF33CC;
} |
CSS (feuille de correction pour tout IE) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| /* CSS Document */
#arbor_1 {
margin: 26px 0px 0px -83px; /* margin-left neg = largeur de l'image + 3*/
text-transform: capitalize;
}
#arbor_2 {
margin: 26px 0px 0px -95px;
text-transform: capitalize;
}
#arbor_3 {
margin: 26px 0px 0px -81px;
text-transform: capitalize;
}
#arbor_4 {
margin: 26px 0px 0px -62px;
}
#arbor_5 {
margin: 26px 0px 0px -90px;
} |
CSS (feuille spécifique à IE6) :
Code:
1
2
3
4
5
6
7
8
| /* CSS Document */
.arbor2 li {
margin: 0px 0px -14px 0px;
}
#last {
margin: 0px;
} |
