Bonjour,
J'essaie de faire un menu défilant vertical au click gauche (le menu descends ) ou droite (le menu monte) sans aide de framework, avec un pas déterminé.
En fait tout se passe bien, si je ne fais que cliquer sur Next ou que cliquer sur Previous. Si j'alterne l'un après l'autre, le Menu ne veut pas changer de sens alors que j'ai mis sa position en variable globale. Il prends le sens du premier click, alors qu'encore une fois si je fais soit tout l'un ou tout l'autre, le Menu défile convenablement.
Je suis parti du raisonnement où j'allais faire varier la position (Top) de la liste , en fonction du click. J'incrémente la position soit positivement, soit négativement selon le sens recherché. Lorsque l'on est au bout de la liste le bouton concerné disparait.
le code Html est simple une Div avec une liste pour le menu et une liste indépendante pour les bouton de Nav
<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>
</ul>
Voici le code JS , je débute donc peut être il ya-t-il des choses redondantes.
var position = 0; /* Variable globale pour la position du menu*/
var vitesse = 1;
var maxPos = 0; /* Décalage max entre 2 clicks*/
function processNext() {
next();
maxPos = 0;
}
function next() {
var objetA = setInterval('next();',80);
var listNav = document.getElementsByClassName('SM');
var listNavLg = listNav.length;
var pas = -100;
var stopNext = (pas) * (listNavLg); /* Fin du défilement*/
var imgN = document.getElementById('imgN');
if (maxPos == 100 && maxPos !== 0) {
clearInterval(objetA);
}
else {
if (position != stopNext) {
var objet = document.getElementById('S_Menu');
position -= vitesse;
objet.style.top = position + 'px';
maxPos += vitesse;
setInterval('next();',80);
}
else {
imgN.style.visibility = 'hidden';
clearInterval(objetA);
}
}
}
function processPrevious() {
previous();
maxPos = 0;
}
function previous() {
var objetA = setInterval('previous();',80);
var listNav = document.getElementsByClassName('SM');
var listNavLg = listNav.length;
var pas = 100;
var stopPrev = (pas) * (listNavLg);
var imgN = document.getElementById('imgP');
if (maxPos == 100 && maxPos !== 0) {
clearInterval(objetA);
}
else {
if (position != stopPrev) {
var vitesse = 1;
var objet = document.getElementById('S_Menu');
position += vitesse;
objet.style.top = position + 'px';
maxPos += vitesse;
setInterval('previous();',80);
}
else {
imgN.style.visibility = 'hidden';
clearInterval(objetA);
}
}
}
Merci de votre aide.