Discussion :

[reureureu]

Bonjour à tous,

Je souhaitais, pour mon site, créer un menu déroulant qui s'étale en largeur, pour chaque catégorie. On m'a alors redirigé vers une solution jQuery qui s’avérait parfaite jusqu'à ce que je découvre un petit bug.

Hormis le fait que le menu déroulant ne soit pas centré sur IE et Google Chrome, j'ai surtout un petit problème quand on passe la souris trop rapidement sur les menus. En revenant sur ces derniers, ils sont alors à moitié ouverts. Je vous laisse l'adresse de la page test du site, ce sera plus parlant :
http://mediadream.celeonet.fr/test/

Est-ce que quelqu'un voit une éventuelle solution à ce désagrément ? Ou est ce qu'une solution CSS serait une meilleure option ?

Voici ci-dessous les différents codes :
droplinemenu.js
droplinetabs.css

Et un début de code HTML du menu

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div id="bandeau_menu">
    <div id="droplinetabs1" class="droplinetabs">
           <ul id="navMenu">
		<li><a href="#" class="menu_link">La bible de <br />la franchise</a>
		    <ul id="ssMenu">
			  <li>
				<div style="float: left; width: 324px; border-right: solid 1px #7A766E;">
				<div style="float: left;"> <img src="imgs/elts/fleche.jpg"> &nbsp;&nbsp;&nbsp;</div>
				<div style="float: left;"> <a href="" class="ssMenu_link"><span class="ssMenuJaune">Définition</span> <span class="ssMenuBlanc">de la franchise</span></a></div>
				<div style="float: left;  width: 302px; text-align: right;"> Qu'est ce que la franchise ?</div>
				<div style="color: #DF9D1C;  width: 302px; text-align: right;">...........................................................................................</div>
				<div style="float: left;"> <img src="imgs/elts/fleche.jpg"> &nbsp;&nbsp;&nbsp;</div>
				<div style="float: left;"> <a href="" class="ssMenu_link"><span class="ssMenuBlanc">Introduction à la</span> <span class="ssMenuJaune">bible de la <br />franchise</span></a></div>
				<div style="float: left; text-align: right;   width: 302px; text-align: right;"> Manuel opératoire de la franchise<br />
				Système de développement de la franchise<br />
				Franchiseur attention au budget<br /></div> 
				<div style="color: #DF9D1C;  width: 302px; text-align: right;">...........................................................................................</div>
				<div style="float: left;"> <img src="imgs/elts/fleche.jpg"> &nbsp;&nbsp;&nbsp;</div>
				<div style="float: left;"> <a href="" class="ssMenu_link"><span class="ssMenuBlanc">L'</span> <span class="ssMenuJaune">opportunité</span> <span class="ssMenuBlanc">franchise ?</span></a></div>
				<div style="float: left; text-align: right;  width: 302px; text-align: right;"> Stratégie financière de la franchise<br />
				Stratégie marketing de la franchise<br /></div> 
			<div>
			<div style="float: left; width: 20px;">&nbsp;</div>
			<div style="float: left; width: 304px; border-right: solid 1px #7A766E;">
			<div style="float: left;"> <img src="imgs/elts/fleche.jpg"> &nbsp;&nbsp;&nbsp;</div>
			<div style="float: left;"> <a href="" class="ssMenu_link"><span class="ssMenuBlanc">Comment</span> <span class="ssMenuJaune">créer une franchise </span> <span class="ssMenuBlanc">?</span></a></div>
																<div style="float: left;  width: 282px; text-align: right;">Etude de faisabilité de la franchise <br />
			Le magasin pilote du franchiseur <br />
			Comment créer une franchise ? <br /> <br />
			</div>
			<div style="color: #DF9D1C;  width: 282px; text-align: right; height: 118px;"> ..................................................................................... </div>
			<div style="float: left;"> <img src="imgs/elts/fleche.jpg"> &nbsp;&nbsp;&nbsp;</div>
			<div style="float: left;"> <a href="" class="ssMenu_link"><span class="ssMenuBlanc">Devenir</span> <span class="ssMenuJaune">franchiseur</span></a></div>
			<div style="float: left; text-align: right;   width: 282px; text-align: right;">L'ingénierie de la franchise<br />
			La règle des 3/2 <br />
			Le manuel opératoire du franchiseur <br />
			La plaquette de commercialisation <br />
			Contrat de franchise et EBE <br />
			Royalties et relation continue</div> 
			</div>
			<div style="float: left; width: 20px;">&nbsp;</div>
			<div style="float: left; width: 284px;">
			<div style="float: left;"> <img src="imgs/elts/fleche.jpg"> &nbsp;&nbsp;&nbsp;</div>
			<div style="float: left;"> <a href="" class="ssMenu_link"><span class="ssMenuBlanc">Les autres formes de </span> <span class="ssMenuJaune">commerce</span> <br /> <span class="ssMenuBlanc">indépendants organisés ?</span></a></div>
			<div style="float: left;  width: 262px; text-align: right;">La licence de Marque <br />
			La concession <br />
			La coopérative <br />
			La commission-affiliation <br />
			Commerce indépendant organisé <br />
			Partenariat <br />
			Franchise financière  <br />
			ou Mandat de gestion <br />
			Franchise industrielle</div>
			</div>
		</li>
	</ul>
</li>
<li> <a><img src="imgs/elts/barre_jaune.jpg"></a> </li>
<li><a href="#" class="menu_link">Management de <br />la franchise</a>
	<ul id="ssMenu">
		 <li> [.....]

En vous remerciant par avance,

SH

[danielhagnoul]

Bonsoir

Problème souvent traité, voir : http://api.jquery.com/stop/ et http://www.developpez.net/forums/d13...s/#post7144102

[reureureu]

Bonsoir,

Désolé, je reviens un peu tard sur le sujet.

Merci pour la réponse. J'ai essayé de mettre en place la solution du stop() mais elle ne semble pas appropriée (ou mal utilisée ?) car, en fonction d'où je la place, elle m'empêche soit d'accéder à plus d'une fois à l'un de mes sous menus, soit de ne carrément pas afficher le menu.

Est-ce que je m'y prends mal ou faut-il passer par une autre solution ?

En vous remerciant pour vos réponses,

SH

[NoSmoking]

Bonjour,

Est-ce que je m'y prends mal ou faut-il passer par une autre solution ?

sans code cela va être dur de chez dur , le 1st lien de Daniel montre pourtant bien des exemples d'utilisations!

[reureureu]

Bonjour et merci de ta réponse,

J'ai mis liens et codes dans mon premier post.

J'ai consulté les pages données par danielhagnoul et essayé d'appliquer les solutions dans mon code mais sans résultat. C'est pour quoi, je me permets de revenir solliciter votre aide.

Le code marche bien, c'est juste dommage qu'il y ait ce léger bug de navigation.

Et je me demande comment régler la navigation parfois trop rapide des internautes. J'avais déjà rencontré ce problème sur un projet personnel avec un effet de fondu d'un élément x vers un élément y, mais je n'ai jamais trouvé de tutoriel ou solution, j'ai envie de dire que c'est toujours très "basique" car je vois énormément d'exemples pour créer des effets d'un élément 1 vers 2 mais lorsqu'on touche à quelque chose de plus grand et dynamique, les choses se corsent et les tutos se font rares.... D'où ma question, appliqué à un cas concret.

En vous remerciant !

SH