/*****************************************************************/ 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
/*****************************************************************/ /** * 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 ?
Marsh Posté le 16-03-2005 à 00:00:34
Salut et merci de ton attention voila mon pb :
g 3 fichiers:
<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>
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;
}
/*****************************************************************/
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 ?