menu css/javascript incompatible ie6
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:
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:
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:
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
}
} |
