Animation -> balancier (skater)

HTML

<!-- Début menu main_section -->
                                                                                                 <div id="main_section" class="section">
																								 																								 
																								 <!-- MEME SI VIDE, TOUJOURS LAISSER CE H2 - LE CSS PEUT LE RENDRE INVISIBLE EN CAS DE BESOIN
																								 SI VRAIMENT GENANT, IL PEUT ETRE RETIRER A CONDITION DE REMPLACER "childs(main_section)[1]"
																								 PAR childs(main_section)[0] ET DE FAIRE ATTENTION ... -->
																								 
																								 <h2>Panel</h2>

																								 
																								 <!-- Début menu principaux -->

																								 <ul class="menu">
																								 
																								 <li class="tab">Site</li>
																								 <li class="tab">Forum</li>
																								 <li class="tab">Tutos</li>
																								 <li class="tab">Partenaire</li>
																								 <li class="tab">Réglement du site</li>
																								 <li class="tab">Surveiller la messagerie</li>
																								 <li class="tab">Base de données</li>
																								 <li class="tab">FAQ</li>
		                                                                                         </ul>
																								 
																								 <!-- Fin menu principaux -->


								 <!-- Début de la content -->
								 <div class="content">


												               <!-- Début de la page -->
															   
															   <div class="page">
																								 <!-- Début de la section -->
																								 
															                                     <div class="section">
																								 
																								 <h3>Administration du site</h3>
																								 
																								 <!-- Début de la menu -->

																								 <ul class="menu">
																								 
																								 <li...

CSS

.parente div
	  {
	  display:inline-block;
	  }
    #main_section
    {
        /* PAS NECESSAIRE POUR LE SCRIPT 
        width : 800px;*/
        margin : auto;
    }
    .section
    {
        /* PAS NECESSAIRE POUR LE SCRIPT */
        padding : 10px;
        background : white;
    }


/*****************début des liste de puce pour le menu profil*******************************************************/

      ul.menu
	  {
	  display:inline-flex;
	  list-style-type:none; /* Car sinon les puces se placent n'importe où */
	  color:#000000;
	  margin:0px 0px 0px 0px; /* top right bottom left */
	  }

	  ul.menu li
	  {
	  padding :8px 8px 8px 8px; /* Pour espacer les boutons entre eux */
	  }


/*****************Fin des liste de puce pour le menu profil*******************************************************/




	  .contenaire_left
      {
	  vertical-align:top;
	  border-color:#000; /* on affiche la couleur de la bordure */
  	  border-style: solid; /*  on affiche le style de l'a bordure */
	  border-width:1px 1px 1px 1px; /* top right bottom left */
	  margin:0px 0px 0px 0px; /* top right bottom left */
	  padding:0px 0px 0px 0px; /* top right bottom left */
	  width:270px;
        }

        .contenaire_center
        {
	  vertical-align:top;
	  border-color:#000; /* on affiche la couleur de la bordure */
  	  border-style: solid; /*  on affiche le style de l'a bordure */
	  border-width:1px 1px 1px 1px; /* top right bottom left */
	  margin:0px 0px 0px 0px; /* top right bottom left */
	  padding:0px 0px 0px 0px; /* top right bottom left */
	  width:20px;
	  min-height:500px;
        }

        .contenaire_right
        {
	  vertical-align:top;
	  border-color:#000; /* on affiche la couleur de la bordure */
  	  border-style: solid; /*  on affiche le style de l'a bordure */
	  border-width:1px 1px 1px 1px; /* top right bottom left */
	  margin:0px 0px 0px 0px; /* top right bottom left */
	  padding:0px 0px 0px 0px; /* top right bottom left */
	  width:424px;
  ...

JavaScript

/*
        On récupère la SECTION principale.
        C'est dans celle-ci que le script va travailler
    */
    var main_section = document.getElementById('main_section');
     
  /*
        On récupère la SECTION principale.
        C'est dans celle-ci que le script va travailler
    */
    var main_section = document.getElementById('main_section');
     
    /*
        On initialise les MENUs et les PAGEs
        C'est à dire qu'on active le premier
            TAB (onglet) de chaque SECTION
            et on affiche la PAGE correspondante
    */
    var menu = childs(main_section)[1];
    reset(menu);
     
    /*
        Cette fonction va selectionner le premier TAB du MENU fourni,
            et afficher la PAGE correspondante en faisant un RESET des
            MENUs qui sont dans le CONTENT
    */
    function reset(menu)
    {
        // En paralèlle au menu est le contenu Cf HTML
        var content = next(menu);
         
        // On reset le menu courant
        var tabs = childs(menu);
        for(var k = 0; k < tabs.length; k++)
        {
            // Si c'est le premier onglet du menu
            if(k == 0)
            {
                $(tabs[k]).removeClass('unactive').addClass('active');
                tabs[k].onclick = function(){ return false; };
            }
            // Sinon ..
            else
            {
                $(tabs[k]).removeClass('active').addClass('unactive');
                tabs[k].onclick = function(){ click(this); };
            }
        }
         
        // On reset les pages courantes
        var pages = childs(content);
        for(var k = 0; k < pages.length; k++)
        {
            if(k == 0)
            {
                $(pages[k]).removeClass('undisplayed').addClass('displayed');
            }
            else
            {
                $(pages[k]).removeClass('displayed').addClass('undisplayed');
            }
        }
         
        // On RESET les menus des pages
        var menus =...