いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に移動するエフェクトのサンプルをご紹介します。 Javascriptは使用せず、CSSのみで表現しています。 概要としては、label要素であるハンバーガーメニューアイコンをクリックすると、関連付けられているチェックボックスの属性を持たせた input要素のチェック状態が変化し、これをCSSの疑似セレクタ(:checked)を利用してチェックされた状態のときに、オフキャンバス状態にしてあるサイドメニューをCSSのtra…