常連

注目の的

質問力

自己紹介

※あまり真剣な質問ではないです

ここに3つのプログラムがあります。それぞれ1重,2重,3重のループ構造をしています。

```lang=JavaScript
//a1
for(var i=1,s='';i<=5;i++)s+=i;
//=> 12345

//a2
for(var i=1,j,s='';i<=5;i++)for(j=1;j<=i;j++)s+=j;
//=> 112123123412345

//a3
for(var i=1,j,k,s='';i<=5;i++)for(j=1;j<=i;j++)for(k=1;k<=j;k++)s+=k;
//=> 11121121231121231234112123123412345
```

これらのループをn重にするためにこう書きました。
```lang=JavaScript
var s='';
function loop(i, nest){
  if(nest)for(var j=1;j<=i;j++)loop(j,nest-1);
  else s+=i;
}
loop(5,5);
//=> 111112111121112112123111121112112123111211212311212312341111211121121231112112123112123123411121121231121231234112123123412345
```

さらに、n重から(n重)重にしようと、こう書きました。
```lang=JavaScript
var s='';
function looop(i, nest){
  if(nest)for(var j=1;j<=i;j++)looop(j,nest-1);
  else loop(i, i);
}
function loop(i, nest){
  if(nest)for(var j=1;j<=i;j++)loop(j,nest-1);
  else s+=i;
}
looop(5,5);
//=> 11111112111111211111211112111211121121231111112111112111121112111211212311111211112111211121121231111211121112112123111211121121231111211121121231112112123112123123411111121111121111211121112112123111112111121112111211212311112111211121121231112111211212311112111211212311121121231121231234111112111121112111211212311112111211121121231112111211212311112111211212311121121231121231234111121112111211212311121112112123111121112112123111211212311212312341112111211212311112111211212311121121231121231234111112111121112112123111121112112123111211212311212312341111211121121231112112123112123123411121121231121231234112123123412345
```

同じようにloooop, looooop, ...と関数を作っていったとき、oの数が(n+1)個の関数を(x,y)と呼び出すことをlooploop(n,x,y)と書くにはlooploop関数をどうすればよいですか?

ループについて

スマホサイトで横から表示するハンバーガーメニューを実装する方法。

現在スマホサイトを作成しておりますが
よくある上から下へ、上下の動きをするハンバーガーメニューではなく
右上から下へ動くメニューを作りたく

jQureyでの実装方法がつかめず質問させて頂きました。

メニューの中身は背景に引いている画像と
その上にテキストリンクを置きたいと思っております。

おそらくイメージつきづらいかと思いますが
slideToggleではなくToggleの動きに近い形をイメージしております。

ただToggleのようにメニューの大きさをいじるのではく
元の大きさの状態で右上からすっとメニューが降りてくるのが理想です。

実装方法ご存知の方いらっしゃいましたら
何卒、ご教授よろしくお願い致します。 

現在他の方が作ったjQueryを参考に作っておりますが
その処理だとAndroidでメニューがdisply:noneになってないようで
横幅が大きく右側に開いてしまい
その上部にハンバーガーメニューが見えます。
そしてボタンを押すことができないので処理が動きません。

説明がへたで伝わりづらいかと思いますので
実際のjs（二つ読み込んでいます。）のソースをお送りいたします。


```lang-javascript
/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {

	var bodyEl = document.body,
		content = document.querySelector( '.content-wrap' ),
		openbtn = document.getElementById( 'open-button' ),
		closebtn = document.getElementById( 'close-button' ),
		isOpen = false;

	function init() {
		initEvents();
	}

	function initEvents() {
		openbtn.addEventListener( 'click', toggleMenu );
		if( closebtn ) {
			closebtn.addEventListener( 'click', toggleMenu );
		}

		// close the menu element if the target it´s not the menu element or one of its descendants..
		content.addEventListener( 'click', function(ev) {
			var target = ev.target;
			if( isOpen && target !== openbtn ) {
				toggleMenu();
			}
		} );
	}

	function toggleMenu() {
		if( isOpen ) {
			classie.remove( bodyEl, 'show-menu' );
		}
		else {
			classie.add( bodyEl, 'show-menu' );
		}
		isOpen = !isOpen;
	}

	init();

})();
```

```lang-javascript
/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );
```

```lang-html
<div class="menu-wrap clearfix">
<nav class="nav-inner">
<div class="nav_logo"><img src="images/head_nav_tit.gif" alt="" width="100%"></div>
<ul class="nav_list clearfix">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
<button class="close-button" id="close-button">Close</button>
</div>
```

```lang-css
body{
	overflow-x:hidden;
	
}

.container {
}

.content-wrap {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}



/* Close Button */
.close-button {
	width: 2.5em;
	height: 2.5em;
	position: absolute;
	right: 1em;
	top: 1em;
	overflow: hidden;
	text-indent: 1em;
	border: none;
	background: transparent;
	color: transparent;
}

.close-button::before,
.close-button::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	left: 50%;
	background: #ec0085;
}

.close-button::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.close-button::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* Menu */
.menu-wrap {
	position: absolute;
	z-index: 1001;
	width: 150%;
	height: 100%;
	right:0;
	background-image: url(../images/head_nav_bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: right top;
	padding: 2em;
	-webkit-transform: translate3d(600px,-600px,0);
	transform: translate3d(600px,-600px,0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.nav-inner{
	width:60%;
	float:right;
		
}

.nav-inner .nav_logo { width: 35%; margin: 0 0 0 4%;}
.nav-inner ul.nav_list {}
.nav-inner ul.nav_list li { float: left; width:38%; margin: 10px 0 0 4%; padding: 5.5% 0 5% 7%; background-image: url(../images/head_nav_arr.gif); background-position: left center; background-size: 10%; background-repeat: no-repeat; font-size: 1.2em; line-height: 1; text-align: left;}


/* Shown menu */
.show-menu .menu-wrap {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
```

[js]スマホサイトで横から表示するハンバーガーメニューを実装する方法

pc用のサイトと同じようにつくると文字やボックスすべてがとても小さくなります
font-size: 15px;

pcだと15pxくらいでちょうどいいのですがスマホでも見やすく（全体的に拡大して）できないでしょうか？
やはりboxサイズやフォントのサイズを全体的に大きく指定するしかないでしょうか