probleme de decalage d'un sous menu en javascript avec IE

probleme de decalage d'un sous menu en javascript avec IE - HTML/CSS - Programmation

Marsh Posté le 16-03-2005 à 00:00:34    

Salut et merci de ton attention voila mon pb  :heink:  :heink: :
g 3 fichiers:

  • html


<html>
<head>
<title>Essai menu</title>
<script language="javascript" type="text/javascript" src="menu.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 
<div id="conteneurMenu">
 <script language="javascript" type="text/javascript">
  <!--
   prechargement(); // Pour le cas ou le chargement de la page est long
  -->
 </script>
 <p class="menu" id="menu1">
  Coucou
 </p>
 <p class="menu" id="menu2">
  Beu
 </p>
 <p class="menu" id="menu3" onMouseOver="montrerMenu('ssmenu3');" onMouseOut="cacherMenuDelai();">
  Toto
 </p>
 <ul class="ssmenu" id="ssmenu3" onMouseOver="montrerMenu('ssmenu3');" onMouseOut="cacherMenuDelai();">
  <li><a href="#">A</a></li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
 </ul>
 <p class="menu" id="menu4" onMouseOver="montrerMenu('ssmenu4');" onMouseOut="cacherMenuDelai();">
  titi
 </p>
 <ul class="ssmenu" id="ssmenu4" onMouseOver="montrerMenu('ssmenu4');" onMouseOut="cacherMenuDelai();">
  <li>G</li>
  <li>H</li>
 </ul>
 <p class="menu" id="menu5">
  tutu
 </p>
</div>
<script language="javascript">
<!--
 chargement();
-->
</script>
 
 
</body>
</html>

 

  • CSS


body{
 font-family:Rockwell, Expo, Copperplate Gothic Bold, Times New Roman;
 font-size:12pt;
 margin:0px;
}
 
.menu{
 height:50px;
 text-align:center;
 background-color:#00FF00;
}
 
.ssmenu{
 background-color:#66CC66;
 border-top-width: medium;
 border-right-width: medium;
 border-bottom-width: thin;
 border-left-width: thin;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #006633;
 border-right-color: #006633;
 border-bottom-color: #006633;
 border-left-color: #006633;
 padding:15px;
 font-family: "comic Sans MS", "Cooper Black", Arial;
 
 width:auto;
 z-index:2;
}
 
.ssmenu a{
 text-decoration: none;
 color:#006633;
}
 
.ssmenu a:hover{
 text-decoration:underline;
 color:#0066CC;
}
 
.ssmenu ul, .ssmenu li{
 list-style-type:none;
}

 

  • javascript


/*****************************************************************/
var delai = 1000; // Temps que le sous menu reste actif:10 sec
var compteur; // Contient le compteur
var nbMenu = 5; // Nombre de menu
 
var debut_left_menu = 0; // Position gauche du menu
var largeur_menu = 200; // Largeur du menu
 
var debut_top_menu = 300; // Position haut du menu
var hauteur_menu = 50; // Hauteur d'un menu
 
var espace_entre_menu = 0; // Espace entre les menus
 
var cont = 'conteneurMenu'; // Nom du conteneur des menus
var menu = 'menu'; // Prefixe de l'id des menus
var ssmenu = 'ssmenu'; // Prefixe de l'id des sous menus
 
/*****************************************************************/
/**
* Fonction à executer avant declaration du menu
* et apres la declaration du conteneur de menus
* Cette fonction cache le conteneur des menus pour
* pour le cas ou le chargement de la page est long
**/
function prechargement(){
 if(document.getElementById(cont))
  document.getElementById(cont).style.visibility="hidden";
}// prechargement
 
/*****************************************************************/
/**
* Fonction à executer apres declaration du menu
* Cette fonction permet de placer les menus et les
* sous menus sur la page web
**/
function chargement(){
 for(i=1 ; i<=nbMenu ; i++){
  // Mise en place du menu
  if(document.getElementById(menu+i)){
   with(document.getElementById(menu+i).style){
    top = debut_top_menu + ((i-1) * (espace_entre_menu + hauteur_menu)) + 'px';
    left = debut_left_menu + 'px';
    width = largeur_menu + 'px';
    heigth = hauteur_menu + 'px';
    position = 'absolute';
   }// with
  }// if
   
  // Mise en place du sous menu
  if(document.getElementById(ssmenu+i)){
   with(document.getElementById(ssmenu+i).style){
    visibility = 'hidden';
    top = debut_top_menu + ((i-1) * (espace_entre_menu + hauteur_menu)) + 'px';
    left = debut_left_menu + largeur_menu + 'px';
    position = 'absolute';
   }// with
  }// if
 }// for
 
 if(document.getElementById(cont))
  document.getElementById(cont).style.visibility="visible";
}// chargement
 
/*****************************************************************/
/**
* Fonction à executer pour afficher un sous menu nomme: name
**/
function montrerMenu(name){
 cacherMenus(); // On supprime eventuellement les autres sous menu
 if(document.getElementById(name))
  document.getElementById(name).style.visibility="visible";
}// montrerMenu
 
/*****************************************************************/
/**
* Fonction à executer pour effacer les sous menu au bout d'un
* certain delai
**/
function cacherMenuDelai(){
 // execute cacherMenus au bout de delai milli-seconde
 compteur = setTimeout('cacherMenus()',delai);
}// cacherMenuDelai
 
/*****************************************************************/
/**
* Fonction utiliser pour cacher les sous menus
**/
function cacherMenus(){
 clearTimeout(compteur); // On arrete le compteur
 for(i=1 ; i<=nbMenu ; i++){
  if(document.getElementById(ssmenu+i))
   document.getElementById(ssmenu+i).style.visibility="hidden";
 }
}// cacherMenus

 
Et le pb est que pour internet explorer le sous menu est decale de 40px
ou est l'erreur ? :pt1cable:

Reply

Marsh Posté le 16-03-2005 à 00:00:34   

Reply

Marsh Posté le 16-03-2005 à 08:59:19    

g trouve un moyen en remplacant les <ul> par des <p>
 
mais si vous trouvez un autre moyen

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed