18041 sujets

Questions générales et questions de débutants

Sous-menus qui s'affichent au chargement?!

Bonjour :o)

J'avance petit à petit grâce à votre aide mais toujours au détour d'un problème résolu, un nouveau problème Smiley biggrin

Là, c'est pas trop grave, mais quand même, ça m'énerve : au chargement de ma page, les sous-menus censés être invisibles avant le mouse over, s'affichent un quart de seconde avant de devenir effectivement invisibles...

Une idée de la cause?!

La page est en ligne : www.safranum.com/test

Voici mon code:


<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';}
}

<div id="menu"> 
    <dl><dt onmouseover="montre();">
      <a href="#">ACCUEIL</a></dt> 
    </dl>
    <dl><dt onmouseover="montre();">
      <a href="#">ACTU</a></dt>
    </dl>
    <dl>
      <dt onmouseover="montre('smenu1');"><a href="#">LE SAFRAN</a></dt>
      <dd id="smenu1"> 
        <ul>
          <li><a href="#">La plante</a></li>
          <li><a href="#">Son histoire</a></li>
          <li><a href="#">Ses légendes</a></li>
          <li><a href="#">Ses vertus</a></li>
          <li><a href="#">L'or rouge</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="montre('smenu2');"><a href="#">SAFRANUM</a></dt>
      <dd id="smenu2"> 
        <ul>
          <li><a href="#">Le projet</a></li>
          <li><a href="#">L'engagement qualité</a></li>
          <li><a href="#">La légende</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="montre('smenu3');"><a href="#">EN CUISINE</a></dt>
      <dd id="smenu3"> 
        <ul>
          <li><a href="#">Conseils d'utilisation</a></li>
          <li><a href="#">Recettes</a></li>
          <li><a href="#">Le coin des chefs</a></li>
        </ul>
      </dd>
    </dl>
    <dl><dt onmouseover="montre();">
      <a href="#">GALERIE</a></dt>
    </dl>
    <dl><dt onmouseover="montre();">
      <a href="#">BOUTIQUE</a></dt>
    </dl>
    <dl><dt onmouseover="montre();">
      <a href="#">LIENS</a></dt>
    </dl>
	</dd>
    </dl></div>


Et bien sûr d'avance merci pour vos lumières Smiley smile
Salut,

Je crois bien que c'est inévitable, à toi d'optimiser ta page pour que le contenu se charge le plus vite possible de manière à limiter cet affichage non désiré Smiley cligne

A vérifier, mais il me semble en effet qu'il est impossible d'empêcher ce subliminal affichage Smiley cligne
Bonjour,
C'est pour être accessibles à ceux qui ont désactivé javascript que les sous-menus sont visibles au chargement. Mais dans ce cas, étant illisibles car écrits sur une seule ligne, autant les cacher en ajoutant dans la feuille de style : 
#menu dd{display:none}

L'important pour l'accessibilité est que la partie toujours visible du menu ne comporte que des liens (comme tu l'a fait). Ceux menant à un sous-menu doivent ouvrir une page d'ou le sous-menu correspondant sera visible de tous.
Pour permettre la navigation au clavier sous js, tu peux ajouter dans les liens vers sous-menus :
<a href="actu.htm" onfocus="montre('smenu1')">ACTU</a></dt>
par exemple Smiley cligne
Modifié par chmel (08 Apr 2007 - 08:33)
Sujet clos
Aller à