<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<header>
  <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">
      <label for="menu_toggle" class="menu_switch"></label>
      <ul>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
      </ul>
    </div>
  </div>
</header>
<div class="block"><a href="#">link</a></div>

.block {
  display: block;
  width: 2px;
  height: 2000px;
  margin: 0 auto;
  padding: 20px 0;
}

.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;
  transition: .3s;
  opacity: 0;
}

.menu {
  display: block;
  width: 250px;
  height: 100vh;
  background: #fff;
  position: fixed;
  top: 0;
  left: -250px;
  transition: .3s;
  overflow: hidden;
  overflow-y: scroll; 
  z-index: 100;
}

.menu ul {
  position: absolute;
  top: 60px;
  list-style: none;
}
.menu ul li:first-child {
  border-top: solid 1px #ddd;
}
.menu ul li a {
  display: block;
  width: 250px;
  font-size: 15px;
  line-height: 40px;
  padding: 0 10px;
  color: #333;
  text-decoration: none;
  background: #eee;
  box-sizing: border-box;
  border-bottom: solid 1px #ddd;
}

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

.scroll_lock {
  overflow: hidden;
}
$(function(){
    $("#menu_toggle").on("click", function(){
    $("body").toggleClass("scroll_lock");
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js