ハンバーガーメニューその1

<div class="site-menu-button">
  <div class="in">
    <div class="menu-toggle">
      <div class="in">
        <span class="t t1"></span>
        <span class="t t2"></span>
        <span class="t t3"></span>
      </div>
    </div>
    <div class="menu-txt"><span class="">CLOSE</span></div>
  </div>
</div>

.site-menu-button {
  position: fixed;
  top: 0;
  right: 0;
  cursor: pointer;
  width: 10vw;
  height: 10vw;
  z-index: 1000;
  opacity: 0; /* 初期状態で非表示 */
  // transition: opacity 0.3s;

  &.loaded {
    opacity: 1; /* ページ読み込み後に表示 */
  }

  .in {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .menu-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ececee;

    .in {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .t {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -1px;
      margin-left: -10px;
      height: 1px;
      width: 20px;
      background-color: #111;
      transform-origin: center left;

      &.t1 {
        transform: translate(0px, -5px) scale(1, 1);
      }

      &.t2 {
        transform: translate(0px, 0px) scale(1, 1);
      }

      &.t3 {
        transform: translate(0px, 5px) scale(1, 1);
      }
    }

    &.active {
      .t1 {
        transform: translate(0px, 0px) scale(1, 1) rotate(45deg);
        transform-origin: center center;
      }

      .t2 {
        transform: translate(0px, 0px) scale(0, 1) rotate(0deg);
      }

      .t3 {
        transform: translate(0px, 0px) scale(1, 1) rotate(-45deg);
        transform-origin: center center;
      }
    }
  }

  .menu-txt {
    position: absolute;
    z-index: 1;
    left: -2em;
    top: 50%;
    height: 70px;
    margin-top: -35px;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(50%);
    color: $dark-gray;

    &.active {
      opacity: 1;
      transform: translateX(0);
      transition: opacity 0.8s, transform 0.8s;
    }
  }

$(document).ready(function () {
  // ページ読み込み時に .loaded クラスを追加
  $(".site-menu-button").addClass("loaded");

  $(".site-menu-button").click(function () {
    $(this).toggleClass("active");
    $(".menu-toggle").toggleClass("active");
    $(".menu-txt").toggleClass("active");
    $(".menu-txt").css({ transition: "opacity 0.8s, transform 0.8s" });
    $(".menu-toggle .t1, .menu-toggle .t3").css({ transition: "0.6s" });
  });
});