menu cascade incompatible avec IE
Dernière réponse : dans Programmation
En survolant le point rouge, je fais apparaitre une fenêtre contenant un menu.
Dans ce menu, toujours, au survol d'un titre de niveau 1(Mairie, Ecole,...), je découvre un second niveau (item 2.1,item2.2,...).
Ce menu fonctionne très bien avec Firefox mais est inopérant avec IE.
Mon niveau en JS étant pas très loin de zéro, je fais donc appel à vous pour m'éclairer.
D'avance merci
(Ci dessous le lien vers l'objet de ce sujet.)
http://xxxxxxxxxxxxxxxxxxxxxxx/
Dans ce menu, toujours, au survol d'un titre de niveau 1(Mairie, Ecole,...), je découvre un second niveau (item 2.1,item2.2,...).
Ce menu fonctionne très bien avec Firefox mais est inopérant avec IE.
Mon niveau en JS étant pas très loin de zéro, je fais donc appel à vous pour m'éclairer.
D'avance merci
(Ci dessous le lien vers l'objet de ce sujet.)
http://xxxxxxxxxxxxxxxxxxxxxxx/
Autres pages sur : menu cascade incompatible
Lassé par la pub ? Créez un compte
Bonjour
1. Je réexplique mon problème
En survolant le point rouge, je fais apparaitre une fenêtre contenant un menu.
Dans ce menu, toujours, au survol d'un titre de niveau 1(Mairie, Ecole,...), je découvre un second niveau (item 2.1,item2.2,...).
Ce menu fonctionne très bien avec Firefox mais est inopérant avec IE.
Mon niveau en JS étant pas très loin de zéro, je fais donc appel à vous pour m'éclairer.
2. J'insère mon code
%code%
<!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" />
<!-- ================================================================
MENU DEROULANT VISIBLE OU INVISIBLE
=================================================================== -->
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<!-- SCRIPT POSITION MENU PAR RAPPORT AU BORD DE LA FENËTRE DU NAVIGATEUR-->
<script type="text/javascript">
<!--//Michel DEBOOM 06/2005
gk=window.Event?1:0; // navigateurs Gecko ou IE
D=document;bulle=popup=popn=encours=wpop=hpop=x=0
function ctrl(e)
{
if(!x){de=!D.documentElement.clientWidth?D.body![:D]( ":D")
.documentElement;x=1} // IE6
el=gk?e.target:event.srcElement; //objet sous la souris
if(!el.tagName)el=el.parentNode; // noeud #text
if(el.className == 'pop' && el.href)
{
popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1));
with(popup){wpop=offsetWidth;hpop=offsetHeight;bulle=style}
if(bulle!=encours) // seulement si changement de bulle
{
encours.left=-999+'px';
encours=bulle;
fx=gk?innerWidth-1![:D]( ":D")
e.clientWidth //l fenêtre
fy=gk?innerHeight-1![:D]( ":D")
e.clientHeight //h fenêtre
sx=gk?pageXOffset![:D]( ":D")
e.scrollLeft //scroll h
sy=gk?pageYOffset![:D]( ":D")
e.scrollTop //scroll v
x=gk?e.pageX:event.clientX+sx; //curseur x
y=gk?e.pageY:event.clientY+sy; //curseur y
posx=x>=fx+sx-wpop-5?x-5-wpop:x+15
posy=y>=fy+sy-hpop-20?fy+sy-hpop-15:y-15
with(bulle){left=posx+'px';top=posy+'px';}
el.onclick=function(){return false}//désactive le lien
}
} else {encours.left=-999+'px';encours=0}
}
D.onmousemove=ctrl
//active la feuille de style
document.getElementsByTagName("link")[0].href="bull.css"
//-->
</script>
<style type="text/css">
.pp {
position: absolute;
left:-999px;top:0;
width:100px;
z-index: 500;
font-size: 10px;
}
.pp p {
margin: 0 0.0em;
}
/*********************/
/* CSS MENU DEROULANT*/
/*********************/
/* POINT ROUGE */
dl.menu dt {
cursor: pointer;
background: #f00;
width:10px;
height: 10px;
z-index: 500;
border-top:solid 1px #969F4A;
border-left:solid 1px #969F4A;
border-bottom:solid 1px #7F0B10;
border-right:solid 1px #7F0B10;
}
/* PAVE DU MENU */
dl.menu dd {
position: absolute;
z-index: 1000;
left:-5em;
margin-top: 0.5em;
width:10em;
background:#FEFF5F;
padding-top:-2px;
border-top:solid 1px #969F4A;
border-left:solid 1px #969F4A;
border-bottom:solid 2px #666723;
border-right:solid 2px #666723;
}
dl, ul ,li{
margin: 0;
padding:2px 0 0px 2px;
list-style-type: none;
}
dl.menu{
position: absolute;
top: 0;
left: 0;
}
dl.menu dd ul li ul
{
list-style-type: none;
padding:0;
text-decoration:none;
display:none;
}
dl.menu dd li:hover ul
{
list-style-type: none;
padding:0;
text-decoration:none;
display:block;
}
/******************************************/
/****** CLASSE PROPRE AU LISTE*********/
p.titre
{
font-style:italic;
text-align-center;
font-size:13px;
font-weight:bold;
padding-bottom:2px;
padding-left:20px;
background:#049794;
color:#fff;
}
.unite li a
{
padding-left:8px;
color:#8f5534;
font-weight:bold;
font-size:11px;
text-decoration:none;
}
.unite li a:hover
{
color:#4F1F05;
font-weight:bold;
font-size:11px;
}
.contact li a
{
font-size:11px;
font-weight:bold;
list-style-type: none;
color:#0B099F;
}
.contact li a:hover
{
list-style-type: none;
color:#0B099F;
}
/******************************************/
/******************************************/
/****** POSITIONNEMENT DES VILLES *********/
/*toulouse*/
#toulouse {
top:530px;
left:348px;
}
/*evreux*/
#evreux {
top:200px;
left: 350px;
}
/******************************************/
</style>
</head>
<body>
<div id="page">
<div id="ville">
<div id="evreux" class="pp" >
<dl class="menu">
<dt onmouseover="javascript:montre('smenu5');"><a href="#"></a>
</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
<p class="titre">Evreux</p>
<ul class="unite">
<li><a href="#">Mairie</a>
<ul class="contact">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li><a href="">Ecole</a>
<ul class="contact">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li><a href="#">...</a>
<ul class="contact">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
<li><a href="#">...</a>
<ul class="contact">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
</ul>
</dd>
</dl>
</div>
<div id="toulouse" class="pp" >
<dl class="menu">
<dt onmouseover="javascript:montre('smenu1');"><a href="#"></a>
</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu31);" onmouseout="javascript:montre();">
<p class="titre">Toulouse</p>
<ul class="unite">
<li class="contact"><a href="#">Sous-Menu 4</a></li>
<li><a href="#">Sous-Menu 5</a></li>
<li><a href="#">Sous-Menu 6</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
%code%
3. Cette page (test) fait parti d'un site intranet qui n'a pas lieu d'être référencée ou faire l'objet de pub via internet. Ce lien fonctionne très bien sur d'autres forums. Ma citation du jour pourrait être " le fond prime sur la forme"
Bonne journée à tous
1. Je réexplique mon problème
En survolant le point rouge, je fais apparaitre une fenêtre contenant un menu.
Dans ce menu, toujours, au survol d'un titre de niveau 1(Mairie, Ecole,...), je découvre un second niveau (item 2.1,item2.2,...).
Ce menu fonctionne très bien avec Firefox mais est inopérant avec IE.
Mon niveau en JS étant pas très loin de zéro, je fais donc appel à vous pour m'éclairer.
2. J'insère mon code
%code%
<!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" />
<!-- ================================================================
MENU DEROULANT VISIBLE OU INVISIBLE
=================================================================== -->
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<!-- SCRIPT POSITION MENU PAR RAPPORT AU BORD DE LA FENËTRE DU NAVIGATEUR-->
<script type="text/javascript">
<!--//Michel DEBOOM 06/2005
gk=window.Event?1:0; // navigateurs Gecko ou IE
D=document;bulle=popup=popn=encours=wpop=hpop=x=0
function ctrl(e)
{
if(!x){de=!D.documentElement.clientWidth?D.body
.documentElement;x=1} // IE6el=gk?e.target:event.srcElement; //objet sous la souris
if(!el.tagName)el=el.parentNode; // noeud #text
if(el.className == 'pop' && el.href)
{
popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1));
with(popup){wpop=offsetWidth;hpop=offsetHeight;bulle=style}
if(bulle!=encours) // seulement si changement de bulle
{
encours.left=-999+'px';
encours=bulle;
fx=gk?innerWidth-1
e.clientWidth //l fenêtrefy=gk?innerHeight-1
e.clientHeight //h fenêtresx=gk?pageXOffset
e.scrollLeft //scroll hsy=gk?pageYOffset
e.scrollTop //scroll vx=gk?e.pageX:event.clientX+sx; //curseur x
y=gk?e.pageY:event.clientY+sy; //curseur y
posx=x>=fx+sx-wpop-5?x-5-wpop:x+15
posy=y>=fy+sy-hpop-20?fy+sy-hpop-15:y-15
with(bulle){left=posx+'px';top=posy+'px';}
el.onclick=function(){return false}//désactive le lien
}
} else {encours.left=-999+'px';encours=0}
}
D.onmousemove=ctrl
//active la feuille de style
document.getElementsByTagName("link")[0].href="bull.css"
//-->
</script>
<style type="text/css">
.pp {
position: absolute;
left:-999px;top:0;
width:100px;
z-index: 500;
font-size: 10px;
}
.pp p {
margin: 0 0.0em;
}
/*********************/
/* CSS MENU DEROULANT*/
/*********************/
/* POINT ROUGE */
dl.menu dt {
cursor: pointer;
background: #f00;
width:10px;
height: 10px;
z-index: 500;
border-top:solid 1px #969F4A;
border-left:solid 1px #969F4A;
border-bottom:solid 1px #7F0B10;
border-right:solid 1px #7F0B10;
}
/* PAVE DU MENU */
dl.menu dd {
position: absolute;
z-index: 1000;
left:-5em;
margin-top: 0.5em;
width:10em;
background:#FEFF5F;
padding-top:-2px;
border-top:solid 1px #969F4A;
border-left:solid 1px #969F4A;
border-bottom:solid 2px #666723;
border-right:solid 2px #666723;
}
dl, ul ,li{
margin: 0;
padding:2px 0 0px 2px;
list-style-type: none;
}
dl.menu{
position: absolute;
top: 0;
left: 0;
}
dl.menu dd ul li ul
{
list-style-type: none;
padding:0;
text-decoration:none;
display:none;
}
dl.menu dd li:hover ul
{
list-style-type: none;
padding:0;
text-decoration:none;
display:block;
}
/******************************************/
/****** CLASSE PROPRE AU LISTE*********/
p.titre
{
font-style:italic;
text-align-center;
font-size:13px;
font-weight:bold;
padding-bottom:2px;
padding-left:20px;
background:#049794;
color:#fff;
}
.unite li a
{
padding-left:8px;
color:#8f5534;
font-weight:bold;
font-size:11px;
text-decoration:none;
}
.unite li a:hover
{
color:#4F1F05;
font-weight:bold;
font-size:11px;
}
.contact li a
{
font-size:11px;
font-weight:bold;
list-style-type: none;
color:#0B099F;
}
.contact li a:hover
{
list-style-type: none;
color:#0B099F;
}
/******************************************/
/******************************************/
/****** POSITIONNEMENT DES VILLES *********/
/*toulouse*/
#toulouse {
top:530px;
left:348px;
}
/*evreux*/
#evreux {
top:200px;
left: 350px;
}
/******************************************/
</style>
</head>
<body>
<div id="page">
<div id="ville">
<div id="evreux" class="pp" >
<dl class="menu">
<dt onmouseover="javascript:montre('smenu5');"><a href="#"></a>
</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
<p class="titre">Evreux</p>
<ul class="unite">
<li><a href="#">Mairie</a>
<ul class="contact">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li><a href="">Ecole</a>
<ul class="contact">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li><a href="#">...</a>
<ul class="contact">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
<li><a href="#">...</a>
<ul class="contact">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
</ul>
</dd>
</dl>
</div>
<div id="toulouse" class="pp" >
<dl class="menu">
<dt onmouseover="javascript:montre('smenu1');"><a href="#"></a>
</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu31);" onmouseout="javascript:montre();">
<p class="titre">Toulouse</p>
<ul class="unite">
<li class="contact"><a href="#">Sous-Menu 4</a></li>
<li><a href="#">Sous-Menu 5</a></li>
<li><a href="#">Sous-Menu 6</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
%code%
3. Cette page (test) fait parti d'un site intranet qui n'a pas lieu d'être référencée ou faire l'objet de pub via internet. Ce lien fonctionne très bien sur d'autres forums. Ma citation du jour pourrait être " le fond prime sur la forme"
Bonne journée à tous
Si tu veux obtenir de l'aide, fais en sorte que ce ne soit pas le modérateur qui ait à intervenir ! - Va lire le règlement et remplace tes %code% par la balise [code].Par ailleurs, évite de donner trop de code, les gens susceptibles de t'aider pourraient se lasser d'avoir à en lire trop. Je dis ça sans savoir si tout ce que tu as donner est pertinent ou pas, ce n'est doncqu'une remarque, pas une critique.
Lassé par la pub ? Créez un compte
