Menu Défilant vertical et sens
Bonjour à tous,
Je désire faire un menu défilant vertical. Mon raisonnement est le suivant :
Je crée une fonction 'defil' dans laquelle j' envoi un paramètre 'sens' +1 ou -1 selon que je click sur la flèche gauche ou droite. Le menu marche parfaitement quand je click uniquement sur gauche ou uniquement sur Droite, le sens est respecté. En revanche dès que j'alterne gauche et droite, ou droite et gauche, le menu défile ds le même sens et prends unqiuement le sens du 1er click.
Le menu et les bouton Nav se présentent sous forme de liste
Code:
1
2
3
4
5
6
7
8
9
10
11
| <div id="Sous_Menu">
<ul id="S_Menu" class="ListeSM">
<li id="SM_EntreesC" class="SM"><img alt="Entrees_Chaudes" src="Bouton_Entrees_C.png"/></li>
<li id="SM_EntreesF" class="SM"><img alt="Entrees_Chaudes" src="Bouton_Entrees_F.png"/></li>
<li id="SM_Decors" class="SM"><img alt="Decors" src="Bouton_Decors.png"/></li>
<li id="SM_DecorsB" class="SM"><img alt="Decors" src="Bouton_Decors.png"/></li>
</ul>
</div>
<ul id="B_Nav">
<li id="Previous" onClick='processPrevious();'><img id="imgP" alt="Précédent" src="B_Nav_Prev.png"/></li>
<li id="Next" onClick='processNext();'><img id="imgN" alt="Suivant" src="B_Nav_Next.png"/></a></li> |
le fichier .js se présente ainsi, sachant qu'il y a des variables 'compteur' qui ne sont pas encore utilisées mais que j'utiliserai pour faire disparaitre les flèches quand le menu arrivera en fin de parcours.
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
49
| var decal = 0; /* décalage entre 2 cliks*/
var compteurN = 0; /* Compteur pour arreter le défilement Next */
var compteurP = 0 /* Compteur pour arreter le défilement Prévious */
var position = 0; /* Position du menu */
var sens;
function processNext() {
defil(1);
decal = 0;
compteurN++;
compteurP--;
}
function processPrevious() {
defil(-1);
decal = 0;
compteurN--;
compteurP++;
}
function defil(sens) {
var deroule = setInterval(function(){defil(sens);},80)
var sousMenu = document.getElementsByClassName('SM');
var nbList = sousMenu.length;
var afficheMenu = 2; /* Nb de Menu à afficher sur la ligne */
var stopDefil = Math.round(nbList / afficheMenu); /* valeur pour arrêt du défilement */
var comptAbs = Math.abs(compteurN); /* compteur pour nb de click */
if (100 == Math.abs(decal)) {
clearInterval(deroule);
}
else {
if (comptAbs != stopDefil) {
var objet = document.getElementById('S_Menu');
position += sens;
objet.style.top = position + 'px';
decal -= sens;
setInterval(function(){defil(sens);},80)
}
}
} |
Je ne vois pas où est le problème, j'ai l'impression que le programme n'interprète pas la valeur négative ou positive du paramètre dès que l' on altèrne le sens.
Merci de votre aide.
