ハンバーガーメニューの作成③JavaScript※追記あり - プログラミングの理解が遅すぎる初心者がJavaScript、Node.jsで投票型掲示板を作ろうとしてます

さて、ここまででハンバーガーメニューのHTMLとCSSを書いてきました。

以下の通りです。

HTML

<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>投票ボタン付き 横棒グラフ</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=menu" />
</head>

<body>
    <header>

        <button id="menu-btn">
            <span class="material-symbols-outlined">menu</span>
        </button>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">投票ページ</a></li>
                <li><a href="#">コメント</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div>
            投票をするところ
        </div>
    </main>
    <footer>
        <p>&copy; 2025 投票アプリ</p>
    </footer>
</body>

</html>

CSS

body {
  font-size: 1rem;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

header {
  position: relative;
  background-color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav {
  position: absolute; /*ヘッダーを基準に書いていく*/
  display: none; /*最初はメニューが見えないようにしておく*/
  top: 100%; /*ヘッダーの下に配置*/
  right: 0; /* 右端はヘッダーに合わせる*/

  ul {
    list-style: none;/* マーカーを消す*/
    padding: 0;      /* ul の内側の余白を消す*/
    
    li {
      margin-bottom: 0.5rem;

      a { /* リンクの表示の扱い*/
        display: block; /* li 全体をクリック可能に*/
        padding: 0.5rem 1rem; /* 内側の余白 */
       text-decoration: none; /* リンクの下線を消す*/
        color: #333; /* ダークグレー*/

        &:hover { /* ホバーしたときの扱い*/
          background-color: #f0f0f0;  /* ホバー時の色*/
        }
      }
    }
  }
}

ですのでここからはボタンを押したらメニュー画面が出てきて、もう一度押したら消える、という動きをJavaScriptで書いていきます。

JavaScriptを書いていく

HTMLにstyle.cssをあとで書き加えるということを前提に書いていきます。

</bodyの直前に<script src="script.js"></script>ですね。

ちなみにsrcはソース（source）の略です。

では考えていきましょう。

getElementByIDでボタンの要素を取得します。

これを操作することでnavを操作するわけですので、こちらはqueryselectorで要素を取得しておきます。

const menuBtn = document.getElementById('menu-btn');
const nav = document.querySelector('nav');

次にボタンをクリックしたらイベントが起こるので以下のようになります。

menuBtn.addEventListener('click', () => {
})

次にイベントの中身（トグル）を書きます。

navを付けたり消したりするわけですので以下のように書きます。

と、ここまで書いて気づきました。

ボタンを押したときのクラスをまだ書いてませんでした。

というわけでshowとでも名付けることにします。

nav {
  position: absolute; /*ヘッダーを基準に書いていく*/
  display: none; /*最初はメニューが見えないようにしておく*/
  &.show{
    display: block; /* （これを追加）show クラスがついたら表示*/
  }
  top: 100%; /*ヘッダーの下に配置*/
  right: 0; /* 右端はヘッダーに合わせる*/

改めてトグルを書きます。

navにトグルを付与することでshowクラスがついたり消えたりするわけですので以下のようになります。

menuBtn.addEventListener('click', () => {
    nav.classList.toggle('show');
})

これで完成です。

ボタンを押すごとに、showというクラスが付与されてnavが表示される、クラスが消されて表示がなくなる、の繰り返しになります。

おわりに

今回は簡単でしたね。

正直もうちょっと時間がかかるかと思いましたけど、簡単で助かりました。

次回はこれらがちゃんと動くかを確認したいと思います。

※追記

どうせ絶対にうまくいかないだろうし、修正する過程とかもあるだろうから確認は次回にしようと思ったのですが、やってみたら普通にできました。

ボタンを押したら、メニューが現れたり消えたりします。

特に問題はありませんでした。

なので次は、メインの項目、つまり投票するところを作っていきます。

おそらく私の頭では理解して作っていくにはかなり時間がかかると思いますが、頑張って行こうと思います。