ハンバーガーメニューアイコンをつくろう

ハンバーガーメニューを作る場合、いくつか方法がありますが3つの要素を作って表示するよりも1つの要素をつくりbefore, after要素をつくって表示するほうが取り回ししやすいの、この方法で作成することをオススメします。

CSSで作成することでアニメーションもCSSで行うことが簡単にできるようになります。

図にあるように、以下のような手順を行うことで簡単に作成することができます。

1. 中央の横棒をつくる
2. before要素で同じ長さの横棒をつくる
3. after要素で同じ長さの横棒をつくる

最初は中央の横棒をつくっていきます。

ここで作成した横棒の幅と高さが上下2本の横棒の同じ幅と高さになります。backgroundの指定は以前にcurrentColorについて少し解説した記事があるのでそちらを御覧ください。

次に上の横棒をbeforeを使ってつくっていきます。

疑似要素は指定した要素の子要素と同様のものとして生成されるので、widthやheightは親要素を基準に計算されます。

そのためwidthやheightなどに100%を指定すると自動的に親要素（中央の横棒）と同じ大きさに表示することができるようになります。

最後に下の横棒も、上の横棒と同じようにつくっていきます。

基本的に上と下の横棒はほぼ同じスタイルを使うことができて、違いは上下の配置ぐらいなのでどちらか一方ができればもう片方もできると思います。