Sliding Menu en utilisant JavaScript

Question

Je suis un peu coincé ...

Jetez un oeil à ceci:

http://jsfiddle.net/matiitas/Lgtv5/1/

Ci-dessous vous trouverez une partie du code JavaScript:

var stopPosition = 860; 
var slidingDiv = ""; 
var slidingDiv2 = ""; 

window.onload = function() { 
    document.getElementById("option").onclick = slideIt; 
    slidingDiv = document.getElementById("content"); 
    document.getElementById("back").onclick = slideIn; 

    document.getElementById("option2").onclick = slideIt2; 
    slidingDiv2 = document.getElementById("content2"); 
    document.getElementById("back2").onclick = slideIn2; 
}; 

function slideIt() { 
    if (parseInt(slidingDiv.style.left) < stopPosition) { 
     slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px"; 
     setTimeout(slideIt, 1); 
     active = true; 
    } 
} 

Je crée un menu coulissant en utilisant javascript mais j'ai 3 problèmes majeurs:

1. Comment est-ce que je peux réutiliser le code ainsi je ne dois pas "répéter" les fonctions encore et encore?
2. Je voudrais que le menu "home" se cache lorsque le menu "Services" est cliqué et viceversa.
3. Je voudrais avoir comme d'avoir deux comportements ... quand on clique dessus pour la première fois de faire glisser le contenu et quand il est cliqué à nouveau pour cacher le contenu ...

Answer 1

1 - Quelque chose comme ce?

function slideIt(divToSlide) { 
    if (parseInt(divToSlide.style.left) < stopPosition) { 
     divToSlide.style.left = parseInt(divToSlide.style.left) + 2 + "px"; 
     setTimeout(slideIt, 1); 
     active = true; 
    } 
} 

Vous ne savez pas ce que fait l'actif.

2 - Poussez tous les éléments animés dans un tableau. Lorsque vous en développez un, réduisez les autres.

function slideIt(divToSlide) { 
    for(var d in slidingDivs) { 
     if(d != divToSlide) collapseDiv(d); 
    } 

    ... 
} 

3 - Il y a plusieurs façons de résoudre ce problème. Gardez une trace de l'état et vérifiez l'état dans votre gestionnaire de clic.