Discussion :

[No0bY]

Bonjour tout le monde,

Actuellement je commence à aborder les menus déroulants en jquery, j'ai codé mon propre menu déroulant, le souci c'est qu'au survol de mon lien/anchor déclencheur, le menu s'affiche bien mais quand je passe tres vite sur ce même lien de manière répétée, le block utilisé pour le deroulement se deroule et la...il se retracte petit à petit jusqu'à ne plus pouvoir s'afficher...

La question que je me pose c'est: à quoi cela est-il du?

voici mon code:

html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<li class="def"><a title="commandes CLI">Programmes/CLI</a>
 
 
                        <div id="fix_absolute">
                            <div id="slide">
                                <a href="javascript:void(0)">CLI</a>
                                <a href="javascript:void(0)">Programmes JQuery</a>
                                <a href="javascript:void(0)">Programmes Shell</a>
                                <a href="javascript:void(0)">Programmes Php</a>  
                            </div>
                        </div>
                </li>

et voila le jQuery (je précise que je débute...):

Code :

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

1
2
3
4
5
6
7
$(".def").mouseover(function(){
 
        $("#fix_absolute #slide").stop().slideDown(80);
 
    }).mouseout(function(){  
        $("#fix_absolute #slide").stop().slideUp(80);
    });

Pour ce qui est du CSS, par défaut le block #slide est en display block.

[SpaceFrog]

tu as oublié le paramètre true du stop sinon il repart de la dernière hauteur de l'objet

[No0bY]

Merci pour ta réponse, je pensais que c'était ca aussi mais apparemment cela n'a rien changé, c'est curieux mais aucun article n'en parle sur internet, je pense que je dois mal m'y prendre sans doute...

pour ma fonction j'ai donc mis ca:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(".def").mouseover(function(){
 
        $("#fix_absolute #slide").stop(true).slideDown(80);
 
 
    }).mouseout(function(){
 
        $("#fix_absolute #slide").stop(true).slideUp(80);
 
 
    });

mais cela n'a rien changé à mon problème, même en utilisant les fonctions animate, je me retrouve avec le même problème, peut être cela viendrait-il de mon css?:

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
17
18
19
20
21
22
23
24
#fix_absolute{//div contenant le menu deroulant fixé
    position: absolute;
}
 
#slide{
    display: none;/*a changer en none*/
    height:170px;
    width: 220px;
    background: url("slider.png") no-repeat;
 
}
 
#slide > a{
/*    color: yellowgreen;*/
    color: #5cb8d2;
    font: 12px "Trebuchet MS",verdana,sans-serif;
    display: block;
    height: 30px;
    width: 220px;
    margin: auto;
    text-align: center;
/*    padding-bottom: 5px;
    padding-top: 7px;*/
}

Voila si cela peut t'aider...merci d'avance l'ami

[SpaceFrog]

Code :

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

$("#fix_absolute #slide").stop(true,false).slideDown(80);