ハンバーガーメニューは、特にモバイルデバイスでのナビゲーションに広く用いられる、3 本の横線で表されるアイコンから展開するメニューです。このブログポストでは、HTML、CSS、および JavaScript を使用してハンバーガーメニューを実装する基本的な方法をステップバイステップで説明します。

1. HTML 構造の準備 まずは、ハンバーガーメニューの HTML 構造を作成します。以下はその基本的な構造です。

<div class="navbar">
  <div class="menu-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">プロジェクト</a></li>
    <li><a href="#">コンタクト</a></li>
  </ul>
</div>

2. CSS を使ったスタイルの適用 次に、CSS を使用してメニューとアイコンにスタイルを適用します。このステップでは、ハンバーガーアイコンとメニュー項目を適切に配置し、見栄えを良くします。

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333;
  padding: 10px 20px;
}

.menu-icon {
  display: block;
  cursor: pointer;
}

.menu-icon span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 4px;
  transition: 0.3s;
}

.menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #333;
  width: 100%;
  left: -100%;
  transition: 0.5s;
}

.menu li {
  padding: 10px;
  border-bottom: 1px solid #fff;
}

.menu li a {
  color: #fff;
  text-decoration: none;
}

@media (min-width: 768px) {
  .menu {
    flex-direction: row;
    position: static;
  }
}

3. JavaScript での動的な動作の追加 最後に、JavaScript を使用してハンバーガーメニューの開閉機能を実装します。以下のコードは、メニューアイコンをクリックすることでメニューの表示と非表示を切り替えるものです。

const menuIcon = document.querySelector(".menu-icon");
const menu = document.querySelector(".menu");

menuIcon.addEventListener("click", function () {
  if (menu.style.left === "-100%") {
    menu.style.left = "0";
  } else {
    menu.style.left = "-100%";
  }
});

まとめ

これで基本的なハンバーガーメニューの実装は完了です。HTML、CSS、そして JavaScript を駆使して、レスポンシブで機能的なナビゲーションメニューを作成することができました。この基本的なフレームワークをカスタマイズし、さらに機能的で視覚的に魅力的なメニューを作ることも可能です。デザインや機能の追加は、プロジェクトのニーズに応じて調整してください。