Javascript水平手风琴“ slidemenu”

我一直在一个网站上工作,该网站要求使用以下水平手风琴javascript: http://www.scriptiny.com/2008/05/horizo​​ntal-javascript-accordion-menu/ 问题在于编写脚本是为了将面板扩展为\“ pt \”值。我希望能够将其扩展为\“%\”值,以避免屏幕尺寸不同(例如,使用移动设备)的用户出现问题。 我一直在努力工作-尝试编辑javascript,改用css等...-似乎无法解决问题。有任何想法吗?     
已邀请:
        替换该slidemenu.js中的所有“ 0”。备份后尝试:-)     
        看看我在这里准备的Codepen演示。
;(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>

要回复问题请先登录注册