menu css/javascript incompatible ie6

**3psilOn** · 30/06/2010, 04h13

Bonjour,

J'ai créé un menu à 2 niveaux hiérarchiques en javascript/css. Il s'affiche correctement sous firefox et chrome par contre sous ie6, je vous dis pas, c'est très moche à voir [confus]
Si quelqu'un, un spécialiste, peut identifier la source du problème... Merci.

Code XHTML :

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
 
<!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>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="scripts/menu.js"></script>
</head>
 
<body>
 
<ul id="menu" onmouseout="RestoreMenu()">
    <li onmouseover="ShowSubMenu('1')"><a id="menu1" class="cat1" href="#">Cat 1</a>
        <ul id="submenu1" class="SubmenuOFF">
            <li><a href="#">Menu 1.1</a></li>
            <li><a href="#">Menu 1.2</a></li>
            <li><a href="#">Menu 1.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('2')"><a id="menu2" class="cat2 currentmenu" href="#">Cat 2</a>
        <ul id="submenu2" class="SubmenuON current">
            <li><a href="#">Menu 2.1</a></li>
            <li><a href="#">Menu 2.2</a></li>
            <li><a href="#">Menu 2.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('3')"><a id="menu3" class="cat3" href="#">Cat 3</a>
        <ul id="submenu3" class="SubmenuOFF">
            <li><a href="#">Menu 3.1</a></li>
            <li><a href="#">Menu 3.2</a></li>
            <li><a href="#">Menu 3.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('4')"><a id="menu4" class="cat4" href="#">Cat 4</a>
        <ul id="submenu4" class="SubmenuOFF">
            <li><a href="#">Menu 4.1</a></li>
            <li><a href="#">Menu 4.2</a></li>
            <li><a href="#">Menu 4.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('5')"><a id="menu5" class="cat5" href="#">Cat 5</a>
        <ul id="submenu5" class="SubmenuOFF">
            <li><a href="#">Menu 5.1</a></li>
            <li><a href="#">Menu 5.2</a></li>
            <li><a href="#">Menu 5.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('6')"><a id="menu6" class="cat6" href="#">Cat 6</a>
        <ul id="submenu6" class="SubmenuOFF">
            <li><a href="#">Menu 6.1</a></li>
            <li><a href="#">Menu 6.2</a></li>
            <li><a href="#">Menu 6.3</a></li>
        </ul>
    </li>            
</ul>
 
</body>
</html>

Code 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
94
95
96
97
98
99
100
101
102
103
104
 
/* CSS Document */
 
* {
	margin:0;
	padding:0;
}
 
html {
	padding:40px;
}
 
#menu {
	position:relative;
	padding-left: 100px;
}
 
	#menu li {
		float: left;
		list-style: none;
		font: 12px Tahoma, Arial;
	}
 
	#menu li a {
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#000;
		font-weight:bold;
		border-top:#333 solid 3px;
		padding:5px 10px 5px 10px;
		margin:0 5px;
		text-decoration:none;
		display: block;
		white-space: nowrap;
	}
 
	#menu li a.cat1		{ border-top-color:#7E0818; }
	#menu li a.cat2		{ border-top-color:#A62A82; }
	#menu li a.cat3		{ border-top-color:#E17F3E; }	
	#menu li a.cat4		{ border-top-color:#B8CD28; }
	#menu li a.cat5		{ border-top-color:#797979; }
	#menu li a.cat6		{ border-top-color:#292A25; }
 
 
	#menu li a:hover, a.menuHover {
	background-color:#F2F2F2;
	color:#333;
	}
 
	#menu li a.currentmenu, #menu li a.currentmenu:hover {
		background-color:#A62A82; /*dynamic color*/
		color:#FFF;
	}
		#menu li ul {
			margin: 0;
			padding: 0;
			position: absolute;
			left:0;
			background-color:#F2F2F2;
			width:100%;
		}
 
		#menu li ul li {
			float: left;
			display: inline;
		}
 
		#menu li ul li a {
			display:block;
			border-top:inherit;
			width: auto;
			color:#333;
			text-decoration:none;
			background-color:inherit;
			border-bottom-color:#F2F2F2;			
			border-bottom-style:solid;
			border-bottom-width:2px;
		}
 
		#submenu1 li a:hover { border-bottom-color:#7E0818; }
		#submenu2 li a:hover { border-bottom-color:#A62A82; }
		#submenu3 li a:hover { border-bottom-color:#E17F3E;	}
		#submenu4 li a:hover { border-bottom-color:#B8CD28;	}
		#submenu5 li a:hover { border-bottom-color:#797979;	}
		#submenu6 li a:hover { border-bottom-color:#292A25;	}
 
#menu li ul.current {
	background-color:#A62A82; /*dynamic color*/
}
#menu li ul.current a {
	color:#FFF;
	border-bottom-color:#A62A82; /*dynamic color*/
}
#menu li ul.current a:hover, #menu li ul.current a.currentsubmenu {
	border-bottom-color:#FFF;
	background-color:inherit;
}
 
.SubmenuOFF {
	display: none;
}
.SubmenuON {
	display: inline;
}

Code 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
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
 
// JavaScript Document
 
function ShowSubMenu(MyID) {
	//** Menu *************************************************************************
	var currentCAT = 2; //catégorie en cours
	var IDMenu = "menu" + MyID; //id menu survolé
	if (MyID != currentCAT) 
		document.getElementById(IDMenu).className = "cat" + MyID + " menuHover"; //attribution classe hover au menu survolé
	for (i=1; i<=6; i++) { //rétablissement des classes des autres menus
		var k = "menu" + i;
		if ( (i != MyID) && (i != currentCAT) )
			document.getElementById(k).className = "cat" + i;
	}	
	//** Submenu ***********************************************************************
	var IDSubmenu = "submenu" + MyID; //id bloc submenu survolé
	if (currentCAT != MyID)
		document.getElementById(IDSubmenu).className='SubmenuON'; //affichage du bloc
	else
		document.getElementById(IDSubmenu).className='SubmenuON current'; //affichage du bloc
	for (i=1; i<=6; i++) {
		var k = "submenu" + i;
		if (i != MyID)
			document.getElementById(k).className='SubmenuOFF';	//cacher les autres blocs submenu
	}
}
 
function RestoreMenu() {	
	var currentCAT = 2; //catégorie en cours
	//** Menu *************************************************************************	
	var IDMenu = "menu" + currentCAT; //id menu courant
		for (i=1; i<=6; i++) { //rétablissement des classes des autres menus
		var k = "menu" + i;
		if ( i != currentCAT )
			document.getElementById(k).className = "cat" + i;
	}	
	//** Submenu ***********************************************************************
	var IDSubmenu = "submenu" + currentCAT; //id bloc submenu courant
	document.getElementById(IDSubmenu).className='SubmenuON current'; //affichage du bloc submenu courant
	for (i=1; i<=6; i++) {
		var k = "submenu" + i;
		if (i != currentCAT)
			document.getElementById(k).className='SubmenuOFF';	//cacher les autres blocs submenu
	}	
 
}

**Baldy** · 01/07/2010, 14h51

Il se peut que tu sois obligé de faire uen feuille de style propre à IE 6 pour régler ton problème car cette version du navigateur de windows ne respecte pas les standards du W3C.

Et si je peut me permettre, faire un site compatible IE6 c'est une perte de temps de nos jours

**devyan** · 01/07/2010, 16h09

Bonjour,

Il existe dans la Galerie CSS un menu du même type que le tien (peut-être fonctionne-t-il correctement avec IE6 et donc tu n'aurais plus qu'à en modifier l'apparence)

devyan

menu css/javascript incompatible ie6

CSS

Discussions similaires

Partager

Partager