Bug affichage menu css et js

Question

jaenani

2 May 2006 à 10:52

Bonjour à tous,

je souhaite réaliser une menu en css horizontal à 2 niveaux :
- le premier niveau est constitué d'images
- le 2ème niveau est un simple texte et s'affiche en fonction du passage de la souris sur les images du niveau 1

je me suis basée sur cet exemple :

[/url]http://mickael.upload.free.fr/Menu_sansimages.htm
jusqu'ici pas de problème :

j'ai réalisé ce menu :
http://mickael.upload.free.fr/menu1.html
le problème est le suivant :
à chaque chargement de la page ou actualisation, les titres de niveau2 se superposent et forment une espèce de gribouille , qui ne fait pas du tout fini ...

pour bien le bug, cliquer sur le bouton actualiser de la page.
évidemment la durée de la superposition varie en fonction de différents paramètres ( débit de l'internaute,temps de réponse ...)

mon site sera géré dynamiquement , et donc pour chaque page le menu est rechargé, donc l'effet réapparait :

voici le code , vous pouvez également le récupérer en enregistrant la page et en affichant la source sous votre éditeur :

code style css


<!-- style menu -->

#menu {background-color: #e2e2e2; position: absolute; top:210px; width:900px;  margin-top:0; left: 50px;  margin:0;padding:0; }
#menu dl {float: left ; margin:0;padding:0;}
#menu li {display: inline; padding-right:4px; padding-left:4px}

#menu li a { color: #616161; text-decoration: none; display:inline; }
#menu li a:hover { color: #616161;text-decoration: underline; }
#menu a#menuimg1 {  text-decoration: none; background:url(./images/titre1.jpg); display:block; height:32px; width:113px; margin:0px;padding:0px; }
#menu a#menuimg1:hover{  background-position:0 -32px; }

#menu a#menuimg2 {  text-decoration: none; background:url(./images/titre2.jpg); display:block; height:32px; width:89px; margin:0px;padding:0px}
#menu a#menuimg2:hover{ background-position:0 -32px;}

#menu a#menuimg3 {text-decoration: none; background:url(./images/titre3.jpg);display:block; height:32px; width:107px; margin:0px;padding:0px}
#menu a#menuimg3:hover{  background-position:0 -32px;}

#menu a#menuimg4 {text-decoration: none; background:url(./images/titre4.jpg);display:block; height:32px; width:123px; margin:0px;padding:0px}
#menu a#menuimg4:hover{ background-position:0 -32px; }

#menu a#menuimg5 {text-decoration: none; background:url(./images/titre5.jpg);display:block; height:32px; width:125px; margin:0px;padding:0px}
#menu a#menuimg5:hover{ background-position:0 -32px;}

#menu a#menuimg6 {text-decoration: none; background:url(./images/titre6.jpg);display:block; height:32px; width:114px; margin:0px;padding:0px}
#menu a#menuimg6:hover{background-position:0 -32px; }

#menu a#menuimg7 {text-decoration: none; background:url(./images/titre7.jpg);display:block; height:32px; width:169px; margin:0px;padding:0px}
#menu a#menuimg7:hover{background-position:0 -32px; }



#smenu1 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu2 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu3 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu4 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu5 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu6 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu7 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
</style>

et le code de la page




	<DIV id="menu">
<DL>
  <DT onMouseOver="montre('smenu1');"><A href="http://#" id="menuimg1"></A> </DT>
  <DD id=smenu1 >
  <UL>
    <LI><A href="http://#">Sous-menu 1.1</A> 
    <LI><A href="http://#">Sous-menu 1.2</A> 
    <LI><A href="http://#">Sous-menu 1.3</A> </LI></UL></DD></DL>
<DL>
  <DT onMouseOver="montre('smenu2');"><A href="http://#" id="menuimg2"></A> </DT>
  <DD id=smenu2 >
  <UL>
    <LI><A href="http://#">Sous-menu 2.1</A> 
    <LI><A href="http://#">Sous-menu 2.2</A> </LI></UL></DD></DL>
<DL>
  <DT onMouseOver="montre('smenu3');"><A href="http://#" id="menuimg3"></A> </DT>
  <DD id=smenu3>
  <UL>
    <LI><A href="http://#">Sous-menu 3.1</A> 
    <LI><A href="http://#">Sous-menu 3.2</A> 
    <LI><A href="http://#">Sous-menu 3.3</A> 
    <LI><A href="http://#">Sous-menu 3.4</A> 
    <LI><A href="http://#">Sous-menu 3.5</A> </LI></UL></DD></DL>
<DL>
  <DT onMouseOver="montre('smenu4');"><A href="http://#" id="menuimg4"></A> </DT>
  <DD id=smenu4>
  <UL>
    <LI><A href="http://#">Sous-menu 4.1</A> 
    <LI><A href="http://#">Sous-menu 4.2</A> 
	<LI><A href="http://#">Sous-menu 4.3</A> </LI></UL></DD></DL>
<DL>	
<DT onMouseOver="montre('smenu5');"><A href="http://#" id="menuimg5"></A> </DT>
  <DD id=smenu5>
  <UL>
    <LI><A href="http://#">Sous-menu 5.1</A> 
    <LI><A href="http://#">Sous-menu 5.2</A> 
	<LI><A href="http://#">Sous-menu 5.3</A> </LI></UL></DD></DL>
		
<DL>	
<DT onMouseOver="montre('smenu6');"><A href="http://#" id="menuimg6"></A> </DT>
  <DD id=smenu6>
  <UL>
    <LI><A href="http://#">Sous-menu 6.1</A> 
    <LI><A href="http://#">Sous-menu 6.2</A> 
	<LI><A href="http://#">Sous-menu 6.3</A> </LI></UL></DD></DL>
	
	
	<DL>	
<DT onMouseOver="montre('smenu7');"><A href="http://#" id="menuimg7"></A> </DT>
  <DD id=smenu7>
  <UL>
    <LI><A href="http://#">Sous-menu 7.1</A> 
    <LI><A href="http://#">Sous-menu 7.2</A> 
	<LI><A href="http://#">Sous-menu 7.3</A> </LI></UL></DD></DL>
</div>

et le code javascript


<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>

aidez moi, quelqu'un aurait il une solution ??

merci d'avance, !!!

chmel

3 May 2006 à 01:43

Bonjour,
Il faut éviter d'appeler "bug", un comportement qu'on ne comprends pas Smiley lol

L'idéal n'est-il pas que seul le menu correspondant à la page en cours soit ouvert au démarrage ?
Que penses-tu de ce projet ?
Modifié par chmel (03 May 2006 - 01:49)

Yamlin

5 May 2006 à 11:16

J'ai trouve une solution ...
J'avais le même probleme :

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 900px;
visibility: hidden;
}
je rejoute : visibility: hidden; pour le sous menu (non affichage des sous menu de base)

ensuite
<script type="text/javascript">

</script>
Je rajoute le control de visibility et j'ai deplace window.onload=montre; pour eviter une erreur dans ie.

Je pense egalement que ce bug vient du temps d'affichage de la page, plus elle met longtemps, plus l'artefact d'affichage perciste.

Avec ca j'ai plus de problème (mais je ne teste qu'avec FF et Ie)

Tiens moi au courrant Smiley smile

Merci,
Yamlin.
Modifié par Yamlin (05 May 2006 - 12:20)

jaenani

5 May 2006 à 13:12

Bonjour Yamlin

merci pour l'info,

il n'y a plus de clignotement mais le menu de niveau 2 ne s'affiche plus non plus alors ...

cela revient à un menu de 1 niveau , non ?

jaenani

5 May 2006 à 13:41

Bonjour Yamlin

je n'avais pas vu le javascript qui règle le problème,
je crois que ça a l'air bon !!!
en tout cas je te remercie infiniment,
t un vrai champion !!
tu m'enlèves un sacré épine du pied !!
merci et bravo !

mecano

28 Nov 2006 à 13:30

Salut à vous, je suis nouveau sur ce forum.

Si comme moi, vous avez utilisé ce menu horizontal avec :

#menu {
position: relative;
top: 0;
left: 0;
z-index:100;
width: 100%;
}

#menu2 {
position: absolute;
top: 0;
left: 140px;
z-index:100;
width: 100%;
}
etc...

(Je n'utilsait pas #smenu1, #smenu2, ... dans ma feuille de style).

et si vous continuez à avoir des problèmes d'affichage, vous n'avez qu'à rajouter dans votre CSS la ligne suivante :

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8 {
visibility: hidden;
}

Bien entendu, il faut utiliser le même JS que mentionné un peu plus haut, c'est à dire :

<script type="text/javascript">

</script>

Ensuite plus de problème au chargement de la page, ni dans Ie, ni dans Opéra, et encore moins sous FireFox.

En tout cas, merci pour ce sujet qui m'a permis de résoudre les problèmes d'affichage liés à l'affichage des calques du menu horizontal au chargement de la page.
[code]

[#][#][#]

Sujet clos

JavaScript, DOM et API Web HTML5

Bug affichage menu css et js