Javascript accordéon horizontal "slidemenu"

 ;(function ($ , window, document, undefined ) { var space = ($(window).width() - $('header').width()); $('.bar').width(space/4); var previousTarget = null; $(".bar").bind('click',function(e){ e.preventDefault(); if(this===previousTarget) { var time = 100; $(this).nextAll().each(function(i,o) { setTimeout( function(){ $(o).css({'z-index':a}); $(o).dequeue().stop().animate({ 'left' : '0' }, 1500, 'easeInOutQuad',function() { $(o).css({'left':'initial'}); }); a++; }, time); time += 50; }); $(this).prevAll().each(function(i,o) { setTimeout( function(){ var that = $(this); $(o).css({'z-index':a}); $(o).dequeue().stop().animate({ 'left' : '0' }, 2000, 'easeInOutQuad',function() { $(o).css({'left':'initial'}); }); a++; }, time); time += 50; }); var left = $(this).prevAll().length; $(this).dequeue().stop().animate({'right':0 * left + 'vw','left':'initial'}); previousTarget=null; return true; } else { $(this).css({'z-index':20}); var a = 4; var t = $(this); if (!t.hasClass('animated')) { var time = 100; $(this).nextAll().each(function(i,o) { setTimeout( function(){ $(o).css({'z-index':a}); $(o).dequeue().stop().animate({ 'left' : '100vw' }, 2000, 'easeInOutQuad'); a++; }, time); time += 50; }); $(this).prevAll().each(function(i,o) { setTimeout( function(){ var that = $(this); $(o).css({'z-index':a}); $(o).dequeue().stop().animate({ 'left' : '-100vw' }, 1500, 'easeInOutQuad'); a++; }, time); time += 50; }); var left = $(this).prevAll().length; $(this).dequeue().stop().animate({'right':20 * left + 'vw','left':'initial'}); } t.addClass('animated'); var time = 100; t.nextAll().each(function(i,o) { setTimeout( function(){ $(o).css({'z-index':a}); $(o).dequeue().stop().animate({ 'left' : '100vw' }, 2000, 'easeInOutQuad'); a++; }, time); time += 50; }); t.prevAll().each(function(i,o) { setTimeout( function(){ var that = $(this); $(o).css({'z-index':a}); $(o).dequeue().stop().animate({ 'left' : '-100vw' }, 1500, 'easeInOutQuad'); a++; }, time); time += 50; }); var left = $(this).prevAll().length; $(this).dequeue().stop().animate({'right':20 * left + 'vw','left':'initial'}); previousTarget=this; return false; } }); })( jQuery, window, document ); 

 /* -- GLOBAL -- */ @import url('fonts.css'); *, *:before, *:after{ -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; } html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} html,button,input,select,textarea{font-family:sans-serif;color:#222;} body{font-size:1em;line-height:1.4;overflow-x:hidden;overflow-y:scroll;min-width:980px;} html,body{height:100%;margin:0;padding:0;width:100%;background-color:#333366;} ::-moz-selection{background:#b3d4fc;text-shadow:none;} ::selection{background:#b3d4fc;text-shadow:none;} /* -- TYPOGRAPHY -- */ h1,h2,h3,h4 { display:block;text-transform:uppercase;letter-spacing:-0.03em; } h2{font:normal normal 400 30pt/normal 'Gobold','Lucida Grande','Lucida Sans Unicode','Lucida Sans','DejaVu Sans','Bitstream Vera Sans','Liberation Sans',Verdana,'Verdana Ref',sans-serif;text-align:center;margin:0;padding:0 0 0 15px;} /* -- STRUCTURE -- */ #main { position:absolute;float:right;width:100%;height:100%;} .pages-detail{position:absolute;z-index:3;top:0;left:40vw;min-height:100vh;max-width:60vw;min-width:60vw;text-align:center;background:#fff;-webkit-transition:all 2s linear;-moz-transition:all 2s linear;transition:all 2s linear;} .pages-detail.closed { opacity:0;width:0;min-height:0; } #page{position:absolute;z-index:1;display:none;padding:10px 0 0 0;top:0;left:40vw;min-height:200px;text-align:center;} /* -- HEADER -- */ header{position:fixed;top:0;left:0;height:100%;width:20vw;background-color:#000000;text-align:center;z-index:4;padding-top:5vh;background-color:#333366;background-size:cover;background-position:center center; } header #social{position:absolute;z-index:5;width:100%;top:65vh;} header #social a{display:block;width:35px;height:28px;margin:0 auto;font-size:1.85em;padding:24px 0;text-decoration:none; } header #social a span{display:block;position:absolute;top:0;left:0;width:0;height:28px;} header h1{margin:0 auto 0 auto;padding:0;background-image:url(../img/logo.gif);width:142px;height:114px;} header h1 a{display:block;width:142px;height:114px;outline:none;} /* -- COLUMNS -- */ #carousel{position:fixed;top:0;left:20vw;z-index:2;width:81vw!important;min-width:700px;height:100vh;overflow:hidden;} #carousel #carousel-inner{position:absolute;z-index:1;height:100%;} #carousel.transform .bar{-webkit-transform:translate3d(0,0,0);} #carousel .bar{display:block;border:1px solid #000;position:relative;cursor:pointer;overflow:hidden;width:20vw;height:100%;float:left;color:#1f1f1f;text-decoration:none;text-align:center;background-size:cover;background-position:center;} #carousel .bar:hover,#carousel .bar:active,#carousel .bar:focus,#carousel .bar:visited{color:#1f1f1f;text-decoration:none;} .active { position:absolute!important;left:0!important;-webkit-transition:all 2s linear;-moz-transition:all 2s linear;-o-transition:all 2s linear;transition:all 2s linear; } #carousel .bar:after { content:'\A';position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(0,0,51);opacity:0;-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-o-transition:all 0.5s linear;transition:all 0.5s linear; } #carousel .bar:hover:after { opacity:0.5; } #carousel .bar img { position:absolute;z-index:1;top:0;left:0;width:100%; } #carousel .bar .title { position:absolute;z-index:6;width:100%;margin-top:38.5vh;background:rgba(0,0,51,0.5); } #carousel .bar .title h2 { text-transform:uppercase;padding:35px 0 35px;color:#ffffff;letter-spacing:-0.02em; } .stripes { width:100%;height:100%;position:absolute;z-index:5;background-size:4px 4px; } @supports (-webkit-appearance:none) { .stripes { background-image:linear-gradient(-45deg,rgba(54,54,116,0.65) 25%,transparent 25%,transparent 50%,rgba(54,54,116,0.65) 50%,rgba(54,54,116,0.65) 75%,transparent 75%,transparent);background-size:4px 4px; } } @-moz-document url-prefix() { .stripes { background:repeating-linear-gradient(-45deg, rgba(54, 54, 116, 0.2) 5px, rgba(54, 54, 116, 0.2) 6px, transparent 10px) repeat scroll 0% 0% transparent; } } 

 <header> <h1><a href="/"></a></h1> </header> <div id="main" role="main"> <div id="carousel"> <div class="bar" data-position="1" title="Foundation" style="background-image:url('/img/page1.jpg');"> <div class="stripes"></div> <div class="title"> <h2>PAGE 1</h2> </div> </div> <div class="bar" data-position="2" title="News" style="background-image:url('/img/page2.jpg');"> <div class="stripes"></div> <div class="title"> <h2>PAGE 2</h2> </div> </div> <div class="bar" data-position="3" title="Social" style="background-image:url('/img/page3.jpg');"> <div class="stripes"></div> <div class="title"> <h2>PAGE 3</h2> </div> </div> <div class="bar" data-position="4" title="Locker" style="background-image:url('/img/page4.jpg');"> <div class="stripes"></div> <div class="title"> <h2>PAGE 4</h2> </div> </div> </div> </div>