Besoin d'aide en javascript

Bonjour,

J'ai un code html/javascript pour faire un site façon "Slider", pour vous donner un aperçu, c'est le même genre que le plugin de CodeCanyon ici : https://0.s3.envato.com/files/27577254/index.html#/homepage

Si vous regardez le menu de ce plugin, vous voyez que le 3 ème bouton "Services" est un menu déroulant, et que les pages de ses sous-menu, glissent verticalement contrairement aux autres qui glissent horizontalement. Et ce que j'aimerai faire, c'est faire la même chose à partir de mon code, qui lui, n'a qu'un menu tout simple, avec toutes les pages glissant horizontalement.

Je pense que c'est possible, qu'en pensez vous ?

Mais étant débutant, j'ai beaucoup de mal, j'ai juste réussi à faire le html, reste le javascript et le CSS ^^ (pour le CSS, je devrais y arriver aussi, enfin je pense, lol)

Voici mon HTML d'origine (simplifié):

<div id="page">  
  <header id="header">  
   <div class="content-width">  
    <nav>   
     <a href="#accueil" rel="accueil" class="active">Accueil</a>  
     <a href="#presentation" rel="presentation">Presentation</a>  
     <a href="#photos" rel="photos">Photos</a>  
     <a href="#plan" rel="plan">Plan d'accès</a>  
     <a href="#contact" rel="contact">Contact</a>  
    </nav>  
   </div>  
  </header>  
  <article id="accueil" class="page active">  
   <section class="content-width">  
    <!-- .............CONTENU DE MA PAGE 1.............-->  
   </section>  
  </article>  
    
  <article id="presentation" class="page">  
   <section class="content-width">  
    <!-- .............CONTENU DE MA PAGE 2.............-->  
   </section>  
  </article>  
    
  <article id="photos" class="page">  
   <section class="content-width">  
    <!-- .............CONTENU DE MA PAGE 3.............-->  
   </section>  
  </article>  
    
  <article id="plan" class="page">  
   <section class="content-width">  
    <!-- .............CONTENU DE MA PAGE 4.............-->  
   </section>  
  </article>  
    
  <article id="contact" class="page">  
   <section class="content-width">    
                        <!-- .............CONTENU DE MA PAGE 5.............-->  
   </section>  
  </article>  
    
  <div class="clear"></div>  
 </div>

Et voici les modifications que j'ai faîtes pour y insérer mes sous-menus:

<header id="header">  
   <div class="content-width">  
    <nav>  
     <ul>  
      <li><a href="#accueil" rel="accueil" class="active">Accueil</a></li>  
      <li><a href="#presentation" rel="presentation">Presentation</a></li>  
      <li><a href="#photos" rel="photos">Photos</a></li>  
                                                         <ul>  
                       <li><a href="#sousmenu1" rel="sousmenu1">sous menu 1</a></li>  
                       <li><a href="#sousmenu2" rel="sousmenu2">sous menu 2</a></li>  
                       <li><a href="#sousmenu3" rel="sousmenu3">sous menu 3</a></li>  
        
                      </ul>  
      <li><a href="#plan" rel="plan">Plan d'accès</a></li>  
      <li><a href="#contact" rel="contact">Contact</a></li>  
     </ul>  
    </nav>  
   </div>  
  </header>

Déja ça, est ce que c'est bon ? ^^

Sinon, voilà mon CSS :

.content-width { width:1024px; margin:0 auto; }  

.clear { clear:both; }  

#header nav { float:right; margin:30px 0 0 0; }  

#header nav a { color:#fff; padding:10px 25px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; float:left; margin:0 15px 0 0; text-decoration:none; text-shadow:#000 1px 1px 0;   
 -moz-transition:all ease-out 0.3s;  
 -webkit-transition:all ease-out 0.3s;  
 transition:all ease-out 0.3s;  
 position:relative;  
 z-index:5;  
}  

#header nav a:hover, #header nav a.active { background:#000; /*box-shadow:rgba(255,255,255,0.3) 0 0 10px;*/ }  

.page { display:none; }  

.page.active { display:block; }

Et le javascript à modifier ^^:

$(document).ready(function() {  
                var _is_animating_page = false;  
 $('#header nav a').click(function() {  
  if ($(this).hasClass('active') || _is_animating_page) return false;  

  if ($(this).hasClass('none')) {  
   document.location = $(this).attr('href');  
   return false;  
  }  

  _is_animating_page = true;  
    
  var div    = '<div class="back-nav"></div>',  
   _width    = $(this).outerWidth(),   
   _height   = $(this).outerHeight(),   
   _top    = $(this).offset().top,   
   _left    = $(this).offset().left,  
   _rel    = $(this).attr('rel'),  
   _width_page  = $(window).width(),  
   _final_width  = ($(this).index() > $('#header nav a.active').index()) ? _width_page : -_width_page;  

  $('#header nav a.active').removeClass('active');  
  $(this).addClass('active');  

  $('body').css({'overflow':'hidden'});  

  $('.page.active').css({'position':'absolute', 'width':'100%'}).animate({left:'-='+_final_width}, 500, 'easeInExpo', function() {  
   $('.page.active').css({'position':'relative', 'width': 'auto', 'left': 'auto'}).removeClass('active').hide();  
   $('#'+_rel).addClass('active').show().css({'position':'relative', 'width':'100%', 'left': _final_width}).animate({left:0}, 500, 'easeOutExpo', function() {  
    $('body').css({'overflow':'auto'});  
    _is_animating_page = false;  
   });  
  });  

  return false;  
 });  

 updateActiveConfig();  
  

});

Voilà, j'espère m'être expliqué clairement et vous avoir mis les codes nécessaires pour m'aidez à réaliser ce menu

Si j'ai oublié de préciser quelque chose, faîtes moi signe ;)

Merci à vous !