今回は、CSS3のアニメーションを使用した、サイドメニューの折り畳みについて。
当サイトも、スマートフォンで表示したり、PCでもブラウザー幅を狭めると右のサイドメニューが折り畳まれる仕組みになっています。
Android版のFirefoxで表示すると、折り畳みのアニメーションが少し不自然にも見えますが、標準であるChromeではちゃんと表示されていますので、Firefox特有のものとして今後の改善を望みます。

さて、サイドメニューは当サイトと同じ右側に固定して、スクロールしても固定されるようにするという前提で進めます。

<input type="checkbox" id="checked">
<div id="menu">
  <p><label class="open-menu" for="checked">Menu</label></p>
</div>

<div class="sidemenu">
  <p><label class="closed-menu" for="checked">Close</label></p>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

まずは説明から。
最初にあるcheckboxは、メニューを開閉するために使います。
ただし、CSSで非表示にして、実際にクリック（タップ）して貰うのは、次にあるlabelの部分です。
このlabelを、for="cheked" （checkboxに設定したid）とする事で、checkboxに連動させています。
サイドメニューを開くためにコンテンツ側に1つ、閉じるためにサイドメニュー内に1つ作ります。
PCで見る事を前提にしているのなら、labelは1つあれば開閉出来ますが、スマホで見る場合はサイドメニューがコンテンツを隠してしまう事を想定しているため、オープンはコンテンツ内、クローズはサイドメニュー内を使って貰う形です。

次に、CSSの基本部分。

#checked {
    display: none;
}

.sidemenu {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 320px;
	color: #FFF;
	background: #393;
	color: FFF;
	overflow: hidden;
}

position: fixed;で、スクロールしても固定するようにします。
メニューの内容物（ulやli、a:linkなど）については、各自設定してください。

さて、これに折り畳みアニメーションを組み合わせます。

.sidemenu {
	-ms-transition-property: all;
	-webkit-transition-property: all;
	transition-property: all;
	-ms-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-ms-transition-delay: 0s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;

	-ms-transform-origin: right center;
	-webkit-transform-origin: right center;
	transform-origin: right center;
	-ms-transform: perspective(300px) rotateY(-90deg);
	-webkit-transform: perspective(300px) rotateY(-90deg);
	transform: perspective(300px) rotateY(-90deg);
}

.check:checked ~ .sidemenu {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

-ms- や -webkit- はベンダープレフィックスという、CSSが草案の時点で先行して各ブラウザーがサポートする時に使用されるもので、最新のブラウザーであれば無くても問題ありませんが、少し古いブラウザーではこれがないとうまく表示されない場合があるため、念のために入れています（chromeなどは強制更新のため、必要ないかもしれませんが…）。
この場合の注意点は、各ブラウザー別の記述をした後、一番最後にベンダープレフィックスなしの記述をする事。
そうしないと、逆に最新のブラウザーでうまくいかない事があるようです。

さて、「ふわっと変わるエフェクト」では記述を簡単にするためtransitionでまとめて設定しましたが、

transition: all .3s;

と

transition-property: all;
transition-duration: 0.3s
transition-delay: 0s;

は同じです。
エフェクトを0.3秒かけて変化させるという意味ですね（delayはエフェクトの開始を遅らせる時に使います）。

次に、折り畳みの回転軸を設定します。

transform-origin: right center;

縦軸が右、横軸が真ん中という意味ですが、今回は横回転させるだけなので横軸は意味がありません。
そして、折り畳みの設定。

transform: perspective(300px) rotateY(-90deg);

perspectiveは遠近効果、つまりパタッと折りたたむ際の奥行です。
rotateYは、横回転の角度。90度じゃないと見えてしまいますね…。
縦回転させたかったら、rotateXを使います。

さて、これでlabel部分をクリック（タップ）する度に、サイドメニューが表示されたり折りたたまれたりするはずです。
今回の場合は、デフォルトがサイドメニューが畳まれた状態になりますので、逆にしたかったらHTMLのchekckboxに最初から checked="checked" を入れるか、CSSで .sidemenu と .check:checked ~ .sidemenuの中身を入れ替えるかしてください。

あとは、「スマートフォン対応ページを考える」でやっているように、スマートフォンの表示幅だったら最初は折り畳み、PCの表示幅だったら折りたたまないとか、PCの表示幅の場合はlabel部分も非表示にして折り畳みそのものを無効にするとか、色々カスタマイズしてみてください。