<header class="header">

    <a href=""><em>たぬちべheader</em></a>

      <!-- ハンバーガーボタン -->

      <button type="button" class="hamburger-button">

        <i class="bi bi-list"></i>

        </button>

      <!-- メニュー -->

      <nav class="hamburger-menu">

        <ul class="hamburger-button-list">

          <li><a href="#">menu1</a></li>

          <li><a href="#">menu2</a></li>

          <li><a href="#">menu3</a></li>

          <li><a href="#">menu4</a></li>

          <li><a href="#">menu5</a></li>

        </ul>

      </nav>

    </header>
  

@charset "UTF-8";  /* 文字コードを指定 */

/* ＝＝＝＝ 全体の設定 ＝＝＝＝ */
a {
  /* アンダーライン消去 */
  text-decoration: none;
}

li {
  list-style: none;
}

/* ＝＝＝＝ ヘッダーの設定 ＝＝＝＝ */
<!-- CSS -->
    @charset "UTF-8";  /* 文字コードを指定 */

    /* ＝＝＝＝ 全体の設定 ＝＝＝＝ */

    body {
      /* 背景の色 */
      background-color: #ffffff;
      /* 文字の種類 */
      font-family: 'Noto Sans JP', sans-serif;
      /* 行（縦）間隔 */
      line-height: 1.6;
      /* 列（横）間隔 */
      letter-spacing: .1rem;
      /* 文字の色 */
      color: #333;
    }
    a {
      /* 文字の色 */
      color: #333;
      /* 文字の装飾 */
      text-decoration: none;
    }
    a:hover {
      /* 文字の色 */
        color: dodgerblue;
    }
    small {
      /* 文字の大きさ */
      font-size: .75rem;
    }
    img {
      /* イメージの最大幅 */
      max-width: 100%;
      /* イメージの高さ */
      height: auto;
      /* イメージの基準位置 */
      vertical-align: bottom;
    }

    li {
      list-style: none;
    }

    /* ＝＝＝＝ ヘッダーの設定 ＝＝＝＝ */

    .hamburger-button {
      /* 位置 */
      position: fixed;
      top: 0;
      right: 0;
      z-index: 999;
      /* 大きさ */
      width: 3.125rem;
      height: 3.125rem;
      font-size: 1.75rem;
      /* 色 */
      background-color: #999;
    }

    .hamburger-menu {
      /* 位置 */
      position: fixed;
      top: 3.125rem;
      left: 0;
      /* 大きさ */
      width: 100vw;
      height: 100vh;
      /* 色 */
      background-color: #444;
      /* 移動前位置 */
      transform: translateX(100%);
    }

    .hamburger-menu-active {
      /* 移動後の位置 */
      transform: translateX(0);
    }

    a {
      /* 色 */
      color: #ffffff;
    }

    .header {
      /* 位置 */
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      /* 色 */
      background-color: #999;
      color: #ffffff;
      /* flexbox */
      display: flex;
      align-items: center;
      /* 大きさ */
      width: 100vw;
      height: 3.125rem;
      /* 余白 */
      padding-left: 1rem;
    }

    /* ＝＝＝＝ メインコンテンツの設定 ＝＝＝＝ */
    body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    main {
      background-color: lavenderblush;
    }
    /* ＝＝ フッターの設定 ＝＝ */
    .footer_container {
      /* 色の設定 */
      background-color: #999;
      /* 文字の設定 */
      text-align: center;
      /* 余白の設定 */
      padding: 0.5rem 0;
    }

  <!-- js -->
  var hamburger = $('.hamburger-menu');

  //ハンバーガーボタンをクリックで表示・非表示
  $('.hamburger-button').on('click',function() {
    hamburger.toggleClass('hamburger-menu-active');

  });
  //画面がサイズ変更したら閉じる
  $(window).on('resize', function() {
    hamburger.removeClass('hamburger-menu-active');
  });