cssでハンバーガーメニューを作成してみたよ - Web.flaさてスマホでよく見るようなハンバーガーメニューですが、せっかくCSSでTransitionについて記事にしたので、ハンバーガーメニューでも作ってみようかと思います。 ネットで調べるといくつか定番？な作り方があるようですが今回自分が作ったのはやり方が違いました。笑 その違いも後で説明します 今回作るハンバーガーメニューの流れ 実際にCodepenで作成したサンプルですが、流れはこんな感じです。 三本線（ハンバーガーのような形してるからこう呼ぶらしい）をクリックすると×印に変わるアニメーションフェードインでメニューが全面に表示される。 といった流れにします。なおjQueryでクリックしたらTransitionアニメーションを実行させる為にクラスを追加する処理をしています。 See the Pen ハンバーガーメニュー by kiriyama (@kirikirimai) on CodePen.
