CSSだけでハンバーガーメニュー

本記事ではCSSだけでハンバーガーメニューを実装します。

##前提条件
・javascriptは書かない
・id属性は使用しない。
・SCSSで書く

とりあえず完成品

See the Pen oNbXdyR by HoRnet2641XX (@hornet2641xx) on CodePen.

##解説とポイント（自分が最初わからなかったところ）

###解説
・CSSだけで行う場合はinputのcheckedで制御する

・アイコンも書いているけど、まぁスクリプト書くならどっかからアイコン持ってきてもいいのかなとは思う

・メニューの展開時は画面全体を暗くするようにoverlayを作る

##ポイント

###紐付けについて。

idを使用した実装方法。
inputタグにid属性を指定して、labelタグに同じ値を設定することで、inputとlabelを紐づける方法。

一例

index.html

  <input type="checkbox" id="drawer__box">
  <label for="drawer__box" class="drawer__icon">
    <span class="icon__parts"></span>
  </label>

ここでid属性を使ってしまうと、メリットよりデメリットが多くなってしまいます。。
もちろんid属性を指定するメリットはたくさんあります（DOMの要素速度の取得速度の向上や、視認性の高さなど）が、
classでできるならその方がいいですよね。

上のコードをidではなく、classにする場合は以下のようにして紐づけることができます。

  <label class="drawer__icon">
    <input class="drawer__toggle" type="checkbox" >
    <span class="drawer__icon__parts"></span>
  </label>

変更点はinputタグをlabelタグで囲んであげるだけです。
classとidが散乱していないので上のコードより見やすいかなと個人的には思います。