ハンバーガーメニュー

2021年3月31日 2021年3月31日 6分34秒

スマートフォン用のメニューボタンでよくある3本線のメニューボタンを、ハンバーガーメニューといいます。

そのハンバーガーメニューをHTMLとCSSで作成する方法と、ハンバーガーメニューをクリックして×印に変更するjavascriptのサンプルです。

※ コピペでそのまま動くと思いますが、自己責任で使用して下さい。

1 サンプル
2 HTML
3 CSS
4 jquery

サンプル

以下のような3本線のボタンがハンバーガーメニューのボタンです。クリックすると×印にアニメーション付きで変更されます。

メニュー

HTML

ポイントは、pタグを埋め込んでいることです。CSSでpタグで真ん中の線を作成し、CSSでaタグの前後で線を作成することで3本線を表示しています。

<div class="menu_wrapper">
  <a href="#menu" id="menu_btn"><p>メニュー</p></a>
</div>

CSS

.menu_wrapper {
  position: relative;
  z-index: 0;
  border: 1px solid #333;
  width: 45px;
  height: 45px;
}

#menu_btn {
  display: block;
  position: relative;
  z-index: 0;
  width: 45px;
  height: 45px;
  cursor: pointer;
}

#menu_btn p,
#menu_btn::before,
#menu_btn::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  width: 30px;
  height: 4px;
  margin: auto;
  background: #333;
}

#menu_btn p {
  z-index: 1;
  overflow: hidden;
}

#menu_btn::before {
  z-index: 2;
  transform: translate(0, -10px);
  content: "";
}

#menu_btn::after {
  z-index: 2;
  transform: translate(0, 10px);
  content: "";
}

/**
 * アニメーションをつける
 */
#menu_btn::before,
#menu_btn::after {
  transition: transform 300ms;
}

/**
 * ×印
 */
#menu_btn.active p {
  opacity: 0;
}

#menu_btn.active::before {
  transform: rotate(45deg);
}

#menu_btn.active::after {
  transform: rotate(-45deg);
}

jquery

$(document).ready(function () {
  $("#menu_btn").on("click", function (event) {
    event.preventDefault();
    this.classList.toggle("active");
  });
});