[Resolu] Menu déroulant CSS et timer

Bonjour,

J'ai utilisé sur un site le menu déroulant du tutoriel du site d'Alsa.

Je voulais savoir s'il était normal que sous Mozilla le menu déroulant reste très souvent déroulé même lorsque la souris n'est plus dessus.
C'est assez aléatoire, cela semble provenir de l'endroit par lequel on sort du menu.

Dans IE, cela se produit si l'on sort du menu par le haut.

Est-ce normal ?
Si oui, y-a-t-il un moyen d'ajouter un timer de 2-3 sec sur le menu déroulant pour que celui-ci finissent par disparaître ?

Merci.
Modifié par johanna33 (13 May 2005 - 15:29)

Bonjour,
C'est normal. La fin du tutoriel est instructive il me semble. : Un menu déroulant en CSS et XHTML

J'ai utilisé la totalité du tutoriel avec le javascript qui permet de cacher le menu déroulant lorsque la souris le quitte.

Seulement ça marche 1x sur 2 dans Firefox, et dans IE cela ne marche pas si l'on quitte le menu par le haut.

Alors apparemment, ce n'est pas censé le faire
Pourtant je viens de tester l'exemple du tuto dans mon Firefox et ça le fait aussi.
Modifié par johanna33 (26 Apr 2005 - 13:11)

johanna33 a écrit :
J'ai utilisé la totalité du tutoriel avec le javascript qui permet de cacher le menu déroulant lorsque la souris le quitte.

Seulement ça marche 1x sur 2 dans Firefox, et dans IE cela ne marche pas si l'on quitte le menu par le haut.

Alors apparemment, ce n'est pas censé le faire
Pourtant je viens de tester l'exemple du tuto dans mon Firefox et ça le fait aussi.

J'ai eu le meme problème. Je l'ai résolu en ajoutant un ouMouseOut=montre() au code du tutorial :

	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>

devient

	<dl>			
		<dt onmouseout="javascript:montre('');" onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#" onmouseout="javascript:montre('');" onmouseover="javascript:montre('smenu1');">Sous-Menu 1.1</a></li>
					<li><a href="#"onmouseout="javascript:montre('');" onmouseover="javascript:montre('smenu1');">Sous-Menu 1.2</a></li>
					<li><a href="#"onmouseout="javascript:montre('');" onmouseover="javascript:montre('smenu1');">Sous-Menu 1.3</a></li>
					<li><a href="#"onmouseout="javascript:montre('');" onmouseover="javascript:montre('smenu1');">Sous-Menu 1.4</a></li>
					<li><a href="#"onmouseout="javascript:montre('');" onmouseover="javascript:montre('smenu1');">Sous-Menu 1.5</a></li>
					<li><a href="#"onmouseout="javascript:montre('');" onmouseover="javascript:montre('smenu1');">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>

montre('') fait disparaitre tous les menus.

Sinon, montre('smenu1') fait apparaitre le sous menu1. On veut ca quand ? Quand la souris est au dessus du bonton menu1 ET quand elle est au dessu s du sous menu 1.

Mais je suis relativement novice, je ne te garanti pas que ca soit la meilleure solution.
Modifié par YogaMan (26 Apr 2005 - 17:19)

J'ai l'impression que ça n'a pas résolu mon pb...
Tu ne l'as plus jamais rencontré avec ce code ?

En tous cas, ça l'alourdit bcp, c'est dommage.

Merci quand même

Hmm...
Sans même lui avoir évoqué l'idée... le client désire que lorsque l'on quitte le sous menu, il reste quelques secondes encore affiché.

C'est une histoire de javascript ?
C'est possible de l'intégrer sur la structure existante ?

Si ce topic doit être déplacé dans le forum Javascript, pas de pb.

Merci

Est-ce qu'un admin pourrait déplacer mon topic dans le Forum javascript ?

Merci.

Un modo devrait pouvoir faire ça

Edité : et voilà johanna33
Modifié par dominique (29 Apr 2005 - 17:02)

Merci
Mais je n'ai tjs pas la moindre réponse...

J'ai entenu parler de setTimeout mais je ne sais pas où trop le placer dans le code utilisé :

<dl>	
<dt id="menu1" onmouseover="javascript:montre('smenu1');">Menu1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
	<ul>
	<li><a href="page1.php">Page1</a></li>
	<li><a href="page2.php">Page2</a></li>
	</ul>
</dd>
</dl>

J'ai fait un menu déroulant qui fait ce que tu veux. En plus , il n'y a aucune référence à du javascript dans le code xhtml

http://www.labordure.com/ferme/

Tu devrais pouvoir l'adapter.

Merci c'est exactement ce que je veux faire.

Je vais essayer de le comprendre (le script.js) et de l'adapter à mon menu.
Modifié par johanna33 (03 May 2005 - 14:53)

Finalement, j'aimerai mieux reprendre le principe du setTimeout dans mon menu existant.

Serait-il possible de faire un truc du genre ::

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="setTimeout('javascript:montre('')',5000);">

Je n'y connais vraiment rien en javascript...

Il faudrait faire :

var smenu1 = document.getElementById('smenu1');
window.onload = function()
{
 smenu1.onmouseout = horsMenu;
}
function horsMenu()
{
 smenu1.style.display = 'none';
}

Je ne sais pas si ça fonctionne (pas tester et pas le temps là maintenant), mais le principe est là... ^^
Modifié par Nyro Xeo (03 May 2005 - 16:08)

Désolée je suis vraiment très nulle.

Il n'y aurait pas moyen d'intégrer le setTimeout là-dedans :

window.onload=montre;
  function montre(id) {
   var d = document.getElementById(id);
    for(var i=1;i<=8;i++){
     if(document.getElementById('smenu'+i)){document.getElementById('smenu'+i).style.display='none';}
    }
   if(d){d.style.display='block';}
  }

dl> 
<dt id="menu1" onmouseover="javascript:montre('smenu1');">Menu1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="page1.php">Page1</a></li>
<li><a href="page2.php">Page2</a></li>
</ul>
</dd>
</dl>

J'avais trouvé une solution mais qui ne marchait pas avec mes "dd" et qui ne fonctionnait pas bien avec IE...

Bonjour à nouveau.

Alors depuis l'autre jour, j'ai continué mes recherches, et est utilisé le menu déroulant d'un autre site, en le modifiant un peu à ma sauce.

Enfin, j'arrive à obtenir le résultat voulu (et par moi et par notre client).

Mais j'ai un nouveau bug.
Sous IE, lorsqu'une nouvelle page est chargé, il me semble que c'est le menu que l'on vois apparaître une fraction de seconde sur la gauche de la page.

Savez-vous à quoi cela est du ?
Chargement du javascript ?
Chargement du css ?

Si vous avez besoin d'infos supplémentaires, demandez-moi.

Site : brienne-auto.fr (ne pas faire de lien direct svp)

ça y est avec l'aide de qqn j'ai résolu ce bug de clignotement.

Si un jour ça intéresse qqn, j'ai donc un menu déroulant en CSS avec javascript qui permet donc un timer, qui permet d'avoir des menus de différentes tailles, et qui marche sous IE 5 et + et FF (j'ai pu testé que ceux-là).
Par contre, je suis juste à même de donner les sources, mais pas d'expliquer exactement comment ça marche.

moi je suis preneur

Moi aussi je suis prenneur !

bonjour,

moi aussi je suis preneur....merci

@+

up

si jamais tu passes encore par ici, je suis également preneur stp

merci