Javascript horizontal accordion “slidemenu”

Question

I've been working on a website that requires the use of the following horizontal accordion javascript:

http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/

The problem is that the script is written to expand a panel to a "pt" value. I want to be able to expand it to a "%" value to avoid issues of users with different screen sizes (i.e. using a mobile device).

I've been working on this forever - trying to edit the javascript, using css instead, etc...- and can't seem to make it work out. Any ideas?

Answer 1

Replace all px to % in that slidemenu.js. Try after taking a backup :-)

Answer 2

Have a look at this Codepen demo I've prepared here.

;(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>