超簡単 ハンバーガーメニューの作り方

こんにちはdaissh04です。

今回はハンバーガーメニューの作り方を紹介したいと思います。

前回のレスポンシブル対応に続き、レスポンシブルのスマホのような縮小画面には必ずと行っていいほど実装されている、ハンバーガーメニューの作り方です。

↑こういうやつですね、クリックするとアコーディオンメニューが表示されます。

ハンバーガーメニューの作り方は多くのサイトで紹介されてますが、そのほとんどがjsを使用し、animationを使用して動的なメニュー出現を表現したりしますが、

今回は初心者向けにhtmlとcssで表現できるハンバーガーメニューの作り方を紹介したいと思います。

Inputタグcheckboxとlabelタグ

 今回の構造としては、ハンバーガーの横3線をクリックすると、inputタグのcheckboxにチェックが入り、チェックが入るとアコーディオンメニューが表示されるという仕組みで実装して行きます

<input type= “checkbox” id = “check”>

<label for “check”><div= “line”></div><div= “line”></div><div= “line”></div></label>

inputのcheckboxのidにcheckを付与します。labelにfor "check"とすることで、labelを選択してもcheckboxにチェックが入るようになります。

また今回の3本線は空のdivタグを3つ並べて表現して行きます。

そしてinput check boxは必要ないですね、

cssで消します。

#check{

display:none;

}

そしてラインをデザイン

.line{

width:20px;

height:5px

margin:3px;

background-color:black;

}

transform:translateX(50px)

このtransformのcssで、アコーディオンメニューの動的な部分を表現して行きます。

50pxだと右に50px移動

-50pxだと左に50px移動

それをY指定すると縦の動きに変化します。

 今回はアコーディオンメニューのクラスをclass = "content"と定義したとします。

.content{

・

・

width:200px;

transform:translateX(200px);

}

 これで、contentの幅分移動させ隠すことができます。

ここにさらにinputにcheckが入ったらと言う動作を定義します。

#input 〜 checked .content{

transform:translateX(0)

}

 これでクリックされるとアコーディオンが表示できます

あと動的な動きを追加したい場合は

Transition: .3x ease-in-out;を追加して下さい。

ざっくりですが、これがハンバーガーメニューの基礎となります。