MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. ハンバーガーメニュー

ハンバーガーメニュー

JavaScript
2024.05.25

ハンバーガーメニューは、モバイルサイトやレスポンシブデザインでよく使用されるメニュー形式で
クリックするとナビゲーションメニューが表示されます。

ハンバーガーメニュー
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ハンバーガーメニューについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="nav_container">
      <div class="hamburger" id="hamburger_menu">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
      <nav id="nav_menu" class="hidden">
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">サービス</a></li>
          <li><a href="#">お問い合わせ</a></li>
          <li><a href="#">会社概要</a></li>
        </ul>
      </nav>
    </div>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
document.addEventListener("DOMContentLoaded", function () {
  // ハンバーガーメニューの要素を取得
  const hamburgerMenu = document.getElementById("hamburger_menu");
  const navMenu = document.getElementById("nav_menu");

  // ハンバーガーメニューがクリックされた時のイベントハンドラ
  hamburgerMenu.addEventListener("click", function () {
    // ナビゲーションメニューの表示・非表示を切り替え
    navMenu.classList.toggle("hidden");
    // ハンバーガーメニューのアニメーションを切り替え
    hamburgerMenu.classList.toggle("open");
  });
});
#nav_container {
  position: relative;
}

.hamburger {
  width: 30px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

.hamburger .bar {
  width: 100%;
  height: 3px;
  background-color: #007bff; /* 青系の色に変更 */
  transition: all 0.3s ease;
}

#nav_menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background-color: rgba(173, 216, 230, 0.95); /* 薄い水色系に変更 */
  color: #333; /* 文字色をダークカラーに変更 */
  padding-top: 60px;
  padding-left: 20px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  z-index: 999;
}

#nav_menu.hidden {
  transform: translateX(100%);
}

#nav_menu ul {
  list-style-type: none;
  padding: 0;
}

#nav_menu ul li {
  margin: 20px 0;
}

#nav_menu ul li a {
  color: #333; /* 文字色をダークカラーに変更 */
  text-decoration: none;
  font-size: 1.2em;
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(51, 51, 51, 0.3); /* ボーダー色を調整 */
  transition: color 0.3s ease;
}

#nav_menu ul li a:hover {
  color: #ff9800; /* 落ち着いたアクセントカラー */
}

.hamburger.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(10px, -10px);
}
JavaScript