Menu déroulant mouseenter mouseleave

Version imprimable

Bonjour,
Je suis débutant en Javascript, et j'essaie de faire un menu déroulant plutôt simple, mais je bloque un peu.

J'ai un onglet principal (sous forme d'un lien avec en bg une image) et quand je clique dessus, un menu se déroule avec un effet toggle (javascript, jquery).

Voici le code que j'ai tenté de faire. Le sous menu descend bien quand je passe ma souris sur l'image, mais le problème est que dès que je sors de la zone de l'image, le menu remonte, du coup je n'ai pas le temps de cliquer sur un sous menu ;) c'est con non ;);)

Merci pour votre aide !
Code:

1 2 3 4 5 6 7 8 9 10 11 $(document).ready(function () { $("#menu-item-20 ul.sub-menu").hide(); $("ul.topnav li").mouseenter(function () { $('#menu-item-20 ul.sub-menu').slideToggle('medium'); $("ul.topnav li").mouseleave(function () { }); }); });
Voici le code html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="menu"> <ul id="false" class="topnav"> <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"> <a href="#">Architecture</a> <ul class="sub-menu" style="display: none; "> </li> <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"> <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"> </ul> </div>

J'ai du nouveau, je viens de trouver mon erreur. Par contre, j'en ai une nouvelle.
je ne sais pas où mettre le mouseleave, pour que quand je quitte la zone ul.topnav li#menu-item-20 avec ma souris, le menu se réenroule. Là, il faut que je sorte de la zone puis que j'y rerentre pour que le menu se referme.

Merci

PS: Par rapport au code précedent, j'ai rajouté une petit animation sur les li du sub menu pour faire jolie.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(document).ready(function () { $("#menu-item-20 ul.sub-menu").hide(); $("ul.topnav li#menu-item-20").mouseenter(function () { $('#menu-item-20 ul.sub-menu').slideToggle('medium'); }); $('#menu-item-20 ul.sub-menu li').mouseover(function () { $(this).animate({ fontSize: "1.3em" }, 150 ); }); $('#menu-item-20 ul.sub-menu li').mouseout(function () { $(this).animate({ fontSize: "1em"}, 150 ); }); $("ul.topnav li#menu-item-20").mouseleave(function () { }); });

22/10/2011, 20h24
danielhagnoul

Bonsoir

Une piste ? Les tutoriels et la FAQ ont toujours été disponibles.

FAQ jQuery

Comment puis-je différer la fermeture d'un menu ?

Pourquoi ma fonction hover() provoque-t-elle un va-et-vient ?

Tutoriels jQuery

Menu déroulant animé avec jQuery

Créer un menu animé fluide avec jQuery

Créer un menu contextuel avec jQuery

Merci pour ces informations très précieuses.
J'ai trouvé une solution, elle est peut être optimisable, mais en tout cas, ca marche

Code:

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
 
$(document).ready(function () {
 
 $("#menu-item-20 ul.sub-menu").hide();   
    var objMenuTimeout = null;
     $("ul.topnav li#menu-item-20").hover(
        function(){
            $("#menu-item-20 ul.sub-menu").toggle("slow");
        },
 
        function(){
            objMenuTimeout = setTimeout(function(){
                $("#menu-item-20 ul.sub-menu").toggle("slow");
            }, null); // 2000 millisecondes = 2 secondes
        }
    );
 
    $("#menu-item-21 ul.sub-menu").hide();   
    var objMenuTimeout = null;
     $("ul.topnav li#menu-item-21").hover(
        function(){
            $("#menu-item-21 ul.sub-menu").toggle("slow");
        },
 
        function(){
            objMenuTimeout = setTimeout(function(){
                $("#menu-item-21 ul.sub-menu").toggle("slow");
            }, null); // 2000 millisecondes = 2 secondes
        }
    );
 
    $("#menu-item-22 ul.sub-menu").hide();   
    var objMenuTimeout = null;
     $("ul.topnav li#menu-item-22").hover(
        function(){
            $("#menu-item-22 ul.sub-menu").toggle("slow");
        },
 
        function(){
            objMenuTimeout = setTimeout(function(){
                $("#menu-item-22 ul.sub-menu").toggle("slow");
            }, null); // 2000 millisecondes = 2 secondes
        }
    );
 
 
 
});

Bonjour

Sans la totalité des codes, je suis un peu dans le brouillard, mais je vous suggère de tester le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 $("[id^='menu-item-']").children("ul.sub-menu").hide(); $("[id^='menu-item-']").hover( function(){ $("ul.sub-menu", this).toggle("slow"); }, function(){ $("ul.sub-menu", this).stop(true, true).delay(2000).toggle("slow"); } );