Menu en cascade css/javascript Bug IE6

**leejunfan** · 02/05/2008, 15h21

Bonjour à tous,

J'ai un problème épineux a vous soumettre, un bug d'affichage avec IE6.

J'explique en deux mots : un menu en cascade de deux sous menu, lors du survol d'un lien dans le premeier sous menu, un second s'ouvre.
Cela fonctionne très bien et s'affiche clairement dans IE7 et Firefox, seulement dans IE6 je me retrouve avec un espace sous le lien vers le sous-sous menu et je n'arrive vraiment pas a m'en débarasser. Je joint mon code pour ceux qui voudraient s'amuser de ce casse tête chinois :

menu.html

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
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<!--Gestion du menu haut-->
<script type="text/javascript" src="menu.js"></script>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<ul id="navigationprincipale">
<a href="#" title="Ouvrir les sous-menus de la rubrique" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();">Menu</a>
							<div id="smenu4" class="smenu" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();"><ul><li><a href="#" onMouseOver="javascript:show();">Sous menu 4.1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li><li><a href="#" title="Ouvrir les sous-menus de la sous-rubrique" onMouseOver="javascript:show('ssmenu3');"  class="ssmenu" >Sous menu 4.2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                            <!-- sous sous menu 3 -->
								<div id="ssmenu3" class="ssmenu" onMouseOver="javascript:show('ssmenu3');" onMouseOut="javascript:show();">
								<ul><li><a href="#">Sous menu 4.2.1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li><li><a href="#">Sous menu 4.2.2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li><li><a href="#">Sous menu 4.2.3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li><li><a href="#">Sous menu 4.2.4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li></ul>
								</div>
                            </li></ul></div></ul></div>
</body>
</html>

menu.js

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
 
function montre(id) {
	var d = document.getElementById(id);
		for (var i = 1; i<=7; i++) {
			if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		}
	if (d) {d.style.display='block';}
	}
 
	function show(id) {
	var d = document.getElementById(id);
		for (var i = 1; i<=7; i++) {
			if (document.getElementById('ssmenu'+i)) {document.getElementById('ssmenu'+i).style.display='none';}
		}
	if (d) {d.style.display='block';}
	}

et enfin la feuille de style, menu.css

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
 
#navigationprincipale, #navigationprincipale li {
margin:0;
padding:0;
list-style:none;
}
 
#navigationprincipale li {float:left;}
 
#navigationprincipale a {display: block; cursor: pointer; font-size:11px; letter-spacing:0px; font-weight:bold; color:black; text-decoration:none;}
 
* html #navigationprincipale li {
	width: 1%;
	overflow: visible;
}
 
*:first-child+html #navigationprincipale li {
	overflow: visible;
}
 
div.smenu {
margin:0;
padding:0 ;
display:none;
position:absolute;
/*top:106px;*/
z-index:1000;
width:190px;
}
 
 
div.smenu ul {
margin:0 ;
padding:0;
padding-bottom:0px;
list-style:none;
border:1px solid #4998D0;
background:#fff;
width:100% !important;
display:block !important;
}
 
div.smenu ul li {
float:none !important;
display:block !important;
margin:0;
 
padding:0;
width:100% !important;
font-size:10px !important;
font-weight:normal !important;
}
 
div.smenu li a {
margin:0;
font-size:10px !important;
font-weight:normal !important;
display:block !important;
margin-top:0px;
padding:5px !important;
/*background:none !important;*/
color:#026094 !important;
text-decoration:none;
text-align:left !important;
}
 
div.smenu li a:hover {
background:#D9EAF4 !important;
color:#000 !important;
}
 
 
 
/* sous-sous menu */
 
div.ssmenu {
margin:-23px 0 0 0;
padding:0 ;
display:none;
position:absolute;
left:191px;
/*top:4px;*/
z-index:1000;
width:190px;
}
 
div.ssmenu ul {
margin:0 ;
padding:0;
list-style:none;
border:1px solid #4998D0;
background:#fff;
}

Ce menu est aisément modifiable et peut servir de base a vos créations ;o)

**Er3van** · 02/05/2008, 15h27

C'est quoi tous ces   qui trainent ??? Margin ou padding c'est bcp plus propre !
J'ai MSIE6 et je ne vois pas ton problème....

**leejunfan** · 02/05/2008, 15h32

Ces sales bêtes qui trainent permettent le click sur toute la longeur des liens, chose que IE6 ne gérait pas (Je dois certifier le site pour IE6), une vieille bidouille en somme

Si tu utilises ce navigateur tu dois voir un espace blanc en dessous de sous menu 4.2 lorsque tu survoles ce lien, qui ouvre le sous-sous menu

**Er3van** · 02/05/2008, 15h42

Euh, toujours pas le symptome que tu décris....

Pour ce qui est des  , j'suis désolé, mais c'est du bricolage. Si tu dois faire valider ton site, trouve une autre solution.

Au passage : le corps du site se met entre <body> et </body>
Le script se déclare juste en dessous de <body>

Et comme j'suis gentil voici un menu identique, mais parfaitement propre, tiré de la gallerie css de Dvlpz.com :

index.html

Code HTML :

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
<!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>
     <title>Menu vertical déroulant vers la droite</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="style.css" type="text/css" />
	 <script type="text/javascript" src="functions.js"></script>
</head>
<body>
 
 
<div id="menu">
	<div class="menu" id="menu1" onmouseover="affiche(this)">
		<a href="#">Menu 1</a>
		<div class="sousmenu" id="sousmenu1" style="display:none" onmouseout="affiche(this)">
			<div><a href="#">SousMenu 1.1</a></div>
			<div><a href="#">SousMenu 1.2</a></div>
			<div><a href="#">SousMenu 1.3</a></div>
		</div>
	</div>
	<div class="menu" id="menu2" onmouseover="affiche(this)">
		<a href="#">Menu 2</a>
		<div class="sousmenu" id="sousmenu2" style="display:none" onmouseout="affiche(this)">
			<div><a href="#">SousMenu 2.1</a></div>
			<div><a href="#">SousMenu 2.2</a></div>
			<div><a href="#">SousMenu 2.3</a></div>
		</div>
	</div>
	<div class="menu" id="menu3" onmouseover="affiche(this)"><a href="#">Menu 3</a></div>
	<div class="menu" id="menu4" onmouseover="affiche(this)"><a href="#">Menu 4</a></div>
</div>
 
<div id="content">
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
Ici le site<br />
</div>
 
</body>
</html>

style.css

Code CSS :

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
*{
	margin:0;
	padding:0;
}
#menu{
	margin:20px 0 0 50px;
	background:#0f0;
	color:#fff;
	float:left;
	display:inline;
}
#menu div{
	width:120px;
	text-align:center;
}
.menu{
	position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	padding-top:3px;
	height:22px;
	display:block;
}
#menu div a:link, #menu div a:visited{
	background:#404040;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
	background:#ca0003;
}
.sousmenu{
	position:absolute;
	left:120px;
	top:0;
}
#content{
	margin:20px 0 0 10px;
	width:600px;
	border:1px solid #abc;
	float:left;
}

functions.js

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
function affiche(obj){
	var id = obj.id;
 
	for(var i = 1; i <= 2; i++){
		document.getElementById('sousmenu'+i).style.display = "none";
	}
 
	if(document.getElementById('sous'+id)){
		document.getElementById('sous'+id).style.display = "block";
	}
}

**leejunfan** · 02/05/2008, 16h34

Je n'ai pas collé le contenu au bon endroit (entre les body), mea culpa
J'arrive sur un site déja construit et je dois gérer les compabtibilités, je ne vais pas tout refaire
D'autant que mon menu fonctionne lui aussi très bien, j'en ai reproduit une toute petite partie ici, il y a juste un bug d'affichage sous IE6 que tu dois être le seul a ne pas voir. Tu es sur que tu es bien sur IE6 ? (aide > a propos)

**Er3van** · 02/05/2008, 17h05

Mdr, oui oui, j'te promet que je suis sur IE6, d'ailleurs, y a plus de 50 postes ici qui demanderaient qu'à passer à IE7 ^^

Et "tout refaire", mon dieu, un menu !

M'enfin c'est toi qui voit

Menu en cascade css/javascript Bug IE6

CSS

Vue hybride

Discussions similaires

Partager

Partager