ハンバーガーメニュー・左から出て右へ消える

HTML

<div class="panelmenu"></div>

CSS

.panelmenu {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  transform: translateX(-110%);
  transition: all 0.6s;
width: 100%;
height:100%;
  background-color:#ffffff;
  opacity: 0;
}
.panelmenu.active {
  transform: translateY(0%); opacity: 1;
}
.panelmenu.closing {
  transform: translateX(110%);
  opacity: 0;
}

jQuery

$(function () {
  $(".navToggle").click(function () {
    $(this).toggleClass("active");

    if ($(this).hasClass("active")) {
      // パネルを左から表示
      $(".panelmenu").removeClass("closing").addClass("active");
      document.body.style.overflow = "hidden";
    } else {
      // パネルを右に引っ込める
      $(".panelmenu").addClass("closing");

      // アニメーションが終わった後に closing クラスを取り除く
      setTimeout(function () {
        $(".panelmenu").removeClass("active closing");
        document.body.style.overflow = "visible";
      }, 600); // 600ms は transition の時間と一致
    }
  });
});

« WEBサイトが開いたときにムービーが動いている

before・afterをcssで画像にする »

2024/05/23更新