Claude Codeでハンバーガーメニューを作る方法

AIコーディング（バイブコーディング）で、ハンバーガーメニューを実装してみました。

利用したのは、Claude Codeでプロンプトは次の通り。

ハンバーガーメニューを実装してください
右上に、丸いハンバーガーボタンを配置してください
クリックしたら、画面の左側からスライドインしてメニューを表示してください
メニューには、ホーム、会社概要、サービス、問い合わせを配置してください

これによって、CSSやJavaScriptが生成されました。まずは、サイドメニューのleftを「-300px」にして画面外に隠します。

.side-menu {
  position: fixed;
  top: 0;
  left: -300px;
...
}

そして、「.active」というクラス名で、これを0に戻して画面に表示されるように仕込んでおきます。

.side-menu.active {
  left: 0;
}

そしたら、これをJavaScriptで制御します。

...
  function toggleMenu() {
    hamburgerBtn.classList.toggle("active");
    sideMenu.classList.toggle("active");
    menuOverlay.classList.toggle("active");

    if (sideMenu.classList.contains("active")) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }

  function closeMenu() {
    hamburgerBtn.classList.remove("active");
    sideMenu.classList.remove("active");
    menuOverlay.classList.remove("active");
    document.body.style.overflow = "";
  }

  hamburgerBtn.addEventListener("click", toggleMenu);
  menuOverlay.addEventListener("click", closeMenu);
...

ボタンのクリックで、「active」というクラス名をつけたり外したりします。これによって、メニューが表示されたり隠れたりします。

最後に、CSSのtransitionで左側からすーっと表示されるように仕込みます。

.side-menu {
...
  transition: left 0.3s ease;
...

これによって、左からスライドするハンバーガーメニューが生成できました。デモは以下をご覧下さい。

ハンバーガーメニューデモ（CodePen）

Contact