Discussion :

[dreadstock]

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 :

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

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

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

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>

[dreadstock]

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 :

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
 
$(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 () {
               });
});