Bonjour, je ne suis malheureusement pas encore très a l'aise avec le Javascript et je n'ai malheureusement pas beaucoup de temps pour chercher des tutoriel bien que j'y ai pourtant consacré un petit moment cet après-midi.

Voici ce que je souhaiterais créer.

J'ai un menu indexé tout simple avec donc des liens dessus et je voudrais que chaque page s'affiche dans une sorte de cadre qui se déroule pour afficher les pages et qui quand on clique sur un nouveau lien se ré-enroule puis se re-déroule avec la nouvelle page dedans.

en gros graphiquement et grossièrement ca donnerais un truc comme ca:



Donc quand on clic sur un lien la partie rouge se rentrera et ressortira avec le contenu de la page correspondante au lien.

Pourriez-vous m'indiquer quelques petites astuces pour pouvoir faire ca et/ou me donner un lien vers un tutoriel qui apprendrait à le faire ?

Merci d'avance.

Voici un exemple de code :

<button onclick="page(1)">Page 1</button>
<button onclick="page(2)">Page 2</button>
<button onclick="page(3)">Page 3</button>
<div id="conteneur" style="width:400px;height:300px;overflow:hidden;position:relative;border:1px solid black;">
<div id="contenu1" style="width:400px;height:300px;position:absolute;top:1px;left:1px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet mollis ligula. Pellentesque accumsan nunc nec est lacinia volutpat. Nulla posuere tortor sit amet turpis molestie eu ullamcorper nunc rutrum. Fusce a odio leo. Morbi sem dolor, scelerisque gravida vehicula sit amet, feugiat ac nisi. Suspendisse potenti. Etiam blandit vehicula dolor sed feugiat. Proin sed hendrerit augue. Ut eu enim mi. Curabitur posuere consectetur tristique. Cras sit amet enim quis ante fringilla porta. Ut turpis velit, consectetur scelerisque accumsan eu, ullamcorper scelerisque tellus. Aenean imperdiet, sapien sed posuere feugiat, neque est facilisis dolor, in adipiscing lorem quam id sem. Pellentesque pharetra, mi sit amet suscipit accumsan, urna magna tempus ligula, et gravida augue quam at elit.Morbi eleifend quam non urna pharetra vulputate.
</div>
<div id="contenu2" style="width:400px;height:300px;position:absolute;top:-300px;left:1px;">
Fusce porttitor eros sit amet dui pretium consequat. Phasellus tincidunt interdum ultrices. Donec sit amet magna lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque euismod dui lacus. Vestibulum ligula tortor, mattis nec ornare eget, convallis et turpis. Proin vel justo non lacus convallis tempor nec et nisl. Aenean ac dui ipsum, id tempor sapien. Vestibulum hendrerit, ante sit amet euismod facilisis, metus leo ultrices lorem, id pulvinar ante justo ut eros. Praesent porttitor, metus et porta laoreet, enim lorem pharetra nibh, vitae rutrum nunc arcu ut ipsum. Proin quam dui, tempor ac facilisis et, convallis quis ante. Quisque hendrerit arcu id ligula sollicitudin sit amet molestie velit ullamcorper. Aliquam quam arcu, vehicula ornare sagittis id, dapibus sit amet justo. Nullam sit amet augue a enim rhoncus congue sit amet sed lectus.
</div>
<div id="contenu3" style="width:400px;height:300px;position:absolute;top:-300px;left:1px;">
Aenean porta, lorem suscipit pellentesque vestibulum, enim ligula vehicula dui, eget imperdiet odio sapien vitae ligula. Nullam bibendum laoreet tortor ut placerat. Quisque vestibulum imperdiet auctor. Praesent id elit leo. Curabitur ac dui nibh, at molestie libero. Sed tristique eros et velit dapibus egestas. Cras a tortor ante. Aliquam sodales rhoncus suscipit. Proin tellus arcu, lacinia ut scelerisque a, consectetur sed nunc. Aenean sollicitudin rhoncus leo et vestibulum. Suspendisse laoreet, leo et malesuada vehicula, sem elit hendrerit tellus, sit amet congue quam sem ac enim.
</div>
</div>


<script type="text/javascript">
var actif = 1;
var timer;
function page(n) {
  if(n!=actif) {
    var contenu_actif = document.getElementById('contenu'+actif);
    var contenu = document.getElementById('contenu'+n);
    actif = n;
    enrouler(contenu_actif,function() {
      derouler(contenu);
    });
  }
}
function enrouler(div,callback) {
  var top = parseInt(div.style.top,10);
  if(top>-300) {
    div.style.top = (top-2)+'px';
    clearTimeout(timer);
    timer = setTimeout(function(){enrouler(div,callback);},20);
  } else if(callback) {
    callback();
  }
}
function derouler(div,callback) {
  var top = parseInt(div.style.top,10);
  console.log(top);
  if(top<0) {
    div.style.top = (top+2)+'px';
    clearTimeout(timer);
    timer = setTimeout(function(){derouler(div,callback);},20);
  } else if(callback) {
    callback();
  }
}
</script>

Là, si tu joues au boulay y'a moyen de le faire bugguer. Mais tu peux résoudre en ça en faisant une meilleure gestion des timeout, avec peut-être une file d'actions ? (Ou alors plus simplement mettre les boutons en disabled durant l'animation)

Merci Golmote je vais essayer ca et j'espère que je vais pas jouer le boulet

Juste pour info si tu sais, les liens javascript sont aussi bien référencés que les html ?

Normalement non, ils ne le sont pas.

Enfin il faut pas compter dessus.

Je crois que beaucoup de robots désactivent le JS.

Pense à mettre ton sujet en résolu à l'aide du lien en bas de page

Du coup si il faut que mes liens soient en javascript c'est pas la peine. Je mise sur un référencement béton pour lancer ma boite hors ma stratégie de liens est bien construite et ca me ferait chier de l'avoir conçut pour rien. Désolé de t'avoir dérangé mais ne t'en fais pas ca me resservira surement pour d'autres sites. Merci de ton aide