cssドロワーメニュー解説

大きくは２つです。左のnavと右のコンテンツdiv。スマホ等の表示領域が狭い場合に常にグローバルメニューがあると、コンテンツ領域が狭くなりユーザビリティが良くありません。なので、メニューは常に隠しておいて、必要な時に出現させます。ちなみにDrawer（ドロワー）とは机とかの引き出しという意味です。基本的にはスマホ対策と言えると思いますが、PCサイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。

レスポンシブデザインになっていますので、横幅を変えてみたりして下さい。メニューを出すには、画面左上の≡をクリック。

point

1. 最初の状態（menuが隠れてる）をAとします。menuが出現して右のコンテンツ領域がずれた状態をBとします。それをcssのtranslateXでアニメーションさせて入れ替えます。navのtransform:translateX(-100%)は隠れている状態です。クリックしたらBになります。transform:translateX(4%)です。
2. <input type="checkbox" id="on">と<label for="on">≡</label>でボタンをやっています。２つで１つのセットと考える。同じid名(#on) をつけるのがポイントです。≡は「合同」と日本語入力して変換すると出て来ます。
3. #onはabsoluteします（clipを有効にするにはposition:absoluteするのは決まり事）。clip:rect(0,0,0,0);で非表示になります。clipというプロパティはcssスプライトみたいな感じです。かなり昔からあるようです。
.wrapのマージンで合同≡の場所を確保。
4. cssに~がよく出て来ますが、セレクタの接続詞です。.aaa ~ .bbb というのは.aaa と.bbbの同じ親に対しての指定となり、css3から新しく追加された指定の仕方です。
5. #on:checked ~ nav → onがチェックされているとnavのbの状態の指定が有効になる。
6. cssのtransformを使った指定の仕方は、スマホならだいたい問題ないと思われるが、念のためjQueryでも実装してみます。その場合「アニメーションする為のcssは最後の２つだけです。」というのが不必要になります。要するにtransformというプロパティを使いcssでやるか、transformを使わずにjQueryでやるかという事になります。jQueryでやる場合はトリガーと、それようのcss(数行)が必要です。jQuery versionはこちら

全部のcss

    body,html {
	margin:0;
	padding:0;
}
body {
	background:pink;
	overflow-x:hidden;
	-webkit-perspective: 1600px;
	perspective: 1600px;
}
#on {
	position:absolute;
	clip:rect(0,0,0,0);
}
label {
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:1em;
	height:1em;
	padding:0.2em;
	cursor:pointer;
	font-size:2em;
	text-align: center;
	line-height:1;
	color:#000;
	-webkit-transition:0.2s;
	transition:0.2s;
}
label:hover {
	color:maroon;
}
#on:checked {
	text-shadow:0 0 0.5em;
}
#on:checked ~ label {
	color:#fff;
	text-shadow:
		0 0 0.1em,
		0 0 0.2em,
		0 0 0.3em,
		0 0 0.4em;
}

.wrap {
	margin-left:3em;
	padding:2em 2em 10em 2em;
	background:rgba(0,0,0,0.2);
	color:saddlebrown;
	-webkit-transition:0.4s;
	transition:0.4s;
	-webkit-transform-origin: right top 0;
	transform-origin: right top 0;
}
.wrap h1{
	color:maroon;
}
p {
	margin-bottom:3em;
	color:saddlebrown;
}
nav ul {
	margin:0 0 5em 0;
	padding:0;
	list-style:none;
}
nav li {
	margin:0;
	padding:0;
}
nav a:hover {
    background: rgba(0, 100, 0, 0.9);
    color: #0c0;
}
nav a {
    background: rgba(120, 74, 55, 0.9);
    color:pink;
    display: block;
    margin: 4px 0;
    padding: 0.8em 0;
    text-align: center;
    text-decoration: none;
	-webkit-transition:0.2s;
	transition:0.2s;
}
nav {
    display: block;
    margin: 3em 0 0;
    max-height: 90%;
    overflow-y: scroll;
    position: fixed;
    width: 50%;
	-webkit-transform:translateX(-100%);
	transform:translateX(-100%);
	-webkit-transition:0.4s;
	transition:0.4s;
}


/*bの状態*/
#on:checked ~ nav {
	-webkit-transform:translateX(4%);
	transform:translateX(4%);
}
/*以下は.wrapが横にずれた状態の指定。上段が普通に横にスライドで下段が立体になる。*/
#on:checked ~ .wrap {
	/*
	-webkit-transform:translateX(50%);
	transform:translateX(50%);
	*/
	-webkit-transform:rotateY(-65deg);
	transform:rotateY(-65deg);
	}
    

アニメーションする為のcss

アニメーションする為のcssは全部のcssの最後の２つだけです。以下↓

    /*bの状態*/
#on:checked ~ nav {
	-webkit-transform:translateX(4%);
	transform:translateX(4%);
}
/*以下は.wrapが横にずれた状態の指定。上段（コメントアウト）が普通に横にスライドで下段が立体になる。*/
#on:checked ~ .wrap {
	/*
	-webkit-transform:translateX(50%);
	transform:translateX(50%);
	*/
	-webkit-transform:rotateY(-65deg);
	transform:rotateY(-65deg);
	}