JavaSctiptが分からない人
「CSSだけで、ハンバーガーメニューを作りたい」
「JavaScriptは勉強していないから、使い方が分からない」
CSSだけでも、実装可能です。
この記事を書いている僕はProgateの上級編をクリアしたばかり。
分かりやすく、解説いたします。
CSSのみで実装！ハンバーガーメニューの作り方
実装サンプル（ソース込み）
３つに分けて、考えるといいです。
- デザイン
- 発火方法
- 動かし方
これらの要素を、ひとつひとつ見ていきましょう。
デザインについて
まずデザインを実装。
初心者は、この時点でもう挫折します。
僕も相当苦戦しました。
大きな四角い箱の中に、小さい小さな四角を３つ入れて実装します。
大きい箱を<Div>タグ、小さい箱を<span>タグとして、コーディングします。
<span>タグのＣＳＳ調整ポイントは下記の通り。
- Display:Blockにして、上から積み重ねる
- それぞれの線の、高さを設定する
これでハンバーガーのデザインは、完成。
発火方法について
発火というのは、動きのキッカケです。
トリガーと呼んだりもします。
これは、Formタグを使って実現します。
理由は、CSS側で疑似クラスを使用できるから。
疑似クラスは、要素が指定の状態にあるときに適用できるセレクタです。
Progateでは、hoverとかで勉強しました！
CSSに疑似クラスを用意します。
ハンバーガー部分を、ラベルタグで囲うようにコーディングします。
すると、ハンバーガーのどの部分をクリックしてもチェックが入るようになりました。
動かし方について
疑似クラスに、動かし方を書きます。
今回実装する内容は、下記の通り。
- 上の線をクルクルする
- 真ん中の線をフェードアウト
- 下の線をクルクルする
実装はこのようになります。
徐々に変化させたいので、Transitionを設定しています。
上と下のクルクルは、クルクルするだけではないです。
実は、中心によりながらクルクルしています。
後は、チェックボックスを非表示にしたら完成です。
セットで使いたい、ですよね？
ハンバーガーメニューって、単体で使うことって少ないです。
アコーディオンメニューと同時に使うことが多いハズ。
アコーディオンメニューについては、別記事にて記載予定です。
では、お疲れさまでした。
