cssでハンバーガーメニュー

cssだけでクラスの付替えっぽいことをしたいときは
checkboxを使う
labelがクリック対象として動作するからlabelをいじくる。
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）

    <input id="nav-input" type="checkbox">
    <label id="nav-close" for="nav-input"></label>

    /*閉じる用の薄黒カバー*/
    #nav-close {
      display: none; //初めは領域の確保すらなし
      z-index: 99; //元のコンテンツより手前に表示

      //左上から100%×100%で表示
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background: black;
      opacity: 0;
      transition: .3s ease-in-out;
    }
    #nav-input:checked~#nav-close {
      display: block;
      opacity: .5;
    }

これでハンバーガーメニューの後ろの薄黒カバーができる。
しかも、タッチすると閉じる。