Masquer un select sous ie6 avec une source de la FAQ
Bonjour,
Je bloque sur l'utilisation d'une source de la FAQ http://javascript.developpez.com/faq...put.div.select qui permet de faire passer un div au dessus d'un select dans IE6.
J'ai constitué un menu horizontal qui doit passer au dessus d'un select, mais je ne sais pas ou placer l'événement onMouseOver="putFrame()", pour le moment j'ai placé l'événement dans la div du menu mais ça ne fonctionne pas.
Pour les courageux qui feront le copier/coller du code ci-dessous qui affiche la page complète avec le css et le javascript, pouvez-vous me dire ou est mon erreur ?
Merci d'avance pour vos réponse :).
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
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
| <!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>
<script type="text/javascript">
// Pour afficher correctement le menu déroulant dans IE6
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// Masquer le select
function putFrame(){
var f = document.createElement("iframe");
var d = document.getElementById("menu");
with(f.style){
position= "absolute";
width = d.offsetWidth+"px";
height= d.offsetHeight+"px";;
top= d.offsetTop+"px";
left= d.offsetLeft+"px";
zIndex= "1";
}
document.body.appendChild(f);
}
</script>
<style>
#Nav {
list-style: none;
}
#Nav li {
background: #7F8400; /* Couleur fond */
float: left;
}
#Nav li a {
display: block;
background: #7F8400; /* Couleur fond */
color: white;
text-decoration: none;
}
#Nav li a:hover {
display: block;
background: #7F8400 url('images/menuactive.gif') repeat-x; /*Couleur passage souris */
color: white;
}
.Menu li {
list-style: none;
display: block;
width:120px;
}
.sous_menu {
list-style: none;
display: block;
width:140px;
margin-left: 120px;
margin-top: -30px;
}
#menu
{
position: relative;
background: #7F8400 url('images/menubg.gif') repeat-x top left;
height: 2.5em; /* Hauteur du fond vert */
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
z-index:2;
}
#menu li a
{
padding: 0.6em 1.0em 0.5em 1.0em; /* Dimension de l'image du menu (menuactive.gif) au passage de la souris*/
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000; /* On passe le texte en noir... */
background: #fff; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#liste { position: absolute; left: 15em; top: 7em; }
</style>
</head>
<body>
<div id="menu" onMouseOver="putFrame()">
<ul id="Nav">
<li><a href="#">Menu</a>
<ul class="Menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<ul class="sous_menu">
<li><a href="#">Menu3</a></li>
</ul>
</ul>
</li>
</ul>
</div>
<div id="liste">
<select>
<option>Option1</option>
</select>
</div>
</body>
</html> |
