レスポンシブwebデザインで、PC用に横に並べたメニューを、スマホで表示させた時は縦に並べることはよくあることですが、何度か使っているうちに、そのメニューが結構邪魔に感じたりすることってありますよね。
スマホで見る時は、必要な時だけメニューを表示させればいいので、そんなメニューの方が絶対便利ですよね。JavaScript (jQuery)で実装すれば割と簡単に作れるようですが、JavaScriptを使用せずに、CSSのみで作ってみました。
大雑把に設明すると、メニュー部分を画面左側に隠しておいて、表示・非表示を切り替える仕組みです。PCで見た時は「MENU」と「CLOSE」ボタンは隠しておきます。