2020年1月22日こんにちはこんばんは、フロントエンドエンジニアのこうへいです!レスポンシブデザインが必須となっている中、必ずと言ってもいいほど登場してくるのが、「ハンバーガーメニュー」です。たくさんのパターンを知っておきストックしておくことで、コーディングがスムーズになること間違いないですね。クリックしたら×にする動きをつけるそもそものハンバーガーアイコンの作り方ハンバーガーアイコンは、三本線で作られたものが一般的です。今回は、以下の条件で作ってみました。<span></span><!--3本目--></div>ハンバーガーアイコンは、spanタグで再現します。spanタグ一つと、擬似要素を使う場合もありますが、僕はこちらの方がわかりやすいので好んで使ってます。27px;}右上に固定配置しつつ、spanの色やサイズを指定します。nth-childを使って、線と線の余白を指定してあげれば、ハンバーガーアイコンの完成。あとは、クリックした時の動きをつける必要がありますね。});});jQueryを使って、ハンバーガーアイコンをクリックした時に、activeというクラスがつくようにします。クラス付与は、toggleClassメソッドを使ってます。指定したCSSクラスが要素に無ければ追加し、あれば削除する。いう意味で、addClassやremoveClassで追加と削除のコードを書かなくて良いのがメリットです。*/}次に、CSSでactiveクラスが付いている時の動きをつけていきます。今回は、transformで45度回転させて×を再現していますが、これもいろいろ方法があるので、パターンを知っておくと良さそう。CodePen.ぐるっと回転させたい場合は、rotateの値を変更すれば、アニメーションっぽさが出ます。次回、ハンバーガーアイコンをクリックした時のメニューパターンについてまとめていきます。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。