ハンバーガーメニュー(スライドメニュー)の作り方

1. デモ

2. 作り方

このデモでは「Google Material Icons」のアイコンと「jQuery」を使用しているので、下記を head タグ内に追加します。

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Hosted Libraries | Google Developers(jQuery バージョン確認)

<div class="menu_area">
  <input type="checkbox" id="menu_toggle" class="menu_input" />
  <label for="menu_toggle" class="menu_switch"></label>
  <label for="menu_toggle" class="menu_overlay"></label>
  <div class="menu">...</div>
</div>

メニューの開閉などの動作はチェックボックスの ON/OFF を利用しています。チェックボックスをメニューボタンとオーバーレイ(画面全体を覆う黒い半透明)に関連付け、どちらをクリックしても動作するようにしています。メニューの中身は省略していますが、「...」の部分に入れます。

/*チェックボックス非表示*/
.menu_input {
  display: none;
}

/*メニュー全体*/
.menu_area {
  position: relative;
}

/*メニューのボタン*/
.menu_switch {
  display: block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #eee;
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 10px;
}

/*メニューのアイコン*/
.menu_switch::before {
  font-family: "Material Icons";
  content: "menu";
  font-size: 20px;
  line-height: 40px;
  padding: 0 10px;
}

/*オーバーレイ*/
.menu_overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0;
  transition: 0.3s;
}

/*メニュー本体*/
.menu {
  position: fixed;
  top: 0;
  left: -250px;
  z-index: 100;
  display: block;
  width: 250px;
  height: 100vh;
  background: #fff;
  overflow: hidden;
  overflow-y: scroll;
  transition: 0.3s;
}

/*動作*/
.menu_input:checked ~ .menu_overlay {
  visibility: visible;
  opacity: 0.5;
}
.menu_input:checked ~ .menu {
  left: 0;
}

/*bodyにclass追加(js)*/
.scroll_lock {
  overflow: hidden;
}
$(function () {
  $("#menu_toggle").on("click", function () {
    $("body").toggleClass("scroll_lock")
  })
})

メニューが開いた状態のときだけ、画面をスクロールさせないようにするために、body に class を追加しています。