ハンバーガーボタンジェネレーター

• HTML
• CSS
• JavaScript
• jQuery

<button id="menuButton" type="button" class="menu-button" aria-labelledby="menuButtonLabel">
  <span class="menu-button__line">
    <span id="menuButtonLabel" style="display: none">メニューボタン</span>
  </span>
</button>.menu-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 6px;
  width: 56px;
  height: 56px;
  border: 1px solid #333333;
  background-color: #ffffff;
}

.menu-button__line,
.menu-button::before,
.menu-button::after {
  content: "";
  width: 28px;
  height: 2px;
  background-color: #333333;
  transition: transform 0.3s, opacity 0.3s;
}

.menu-button.is-opened .menu-button__line {
  opacity: 0;
}

.menu-button.is-opened::before {
  transform: translateY(8px) rotate(45deg);
}

.menu-button.is-opened::after {
  transform: translateY(-8px) rotate(-45deg);
}const menuButton = document.getElementById("menuButton");
let isMenuOpened = false;

function toggleMenu() {
  isMenuOpened = !isMenuOpened;
  if (isMenuOpened) {
    // メニューを開いた時の処理
    menuButton.classList.add("is-opened");
  } else {
    // メニューを閉じた時の処理
    menuButton.classList.remove("is-opened");
  }
}

menuButton.addEventListener("click", toggleMenu);const menuButton = $("#menuButton");
let isMenuOpened = false;

function toggleMenu() {
  isMenuOpened = !isMenuOpened;
  if (isMenuOpened) {
    // メニューを開いた時の処理
    menuButton.addClass("is-opened");
  } else {
    // メニューを閉じた時の処理
    menuButton.removeClass("is-opened");
  }
}

menuButton.on("click", toggleMenu);

コピーする