【脱jQuery】Vanilla JSとCSSだけで作る！軽量レスポンシブ・ハンバーガーメニュー

Webサイトをスマホ対応させる際、必須となるのが「ハンバーガーメニュー（三本線のアイコン）」です。
昔はjQueryの slideToggle() などを使うのが主流でしたが、今は標準のJavaScript（Vanilla JS）だけで簡単に、しかも軽量に実装できます。
Play Spotで実際に稼働しているコードをベースに解説します。

🎨 1. CSSでの出し分け（メディアクエリ）

まずは「PCではメニューをそのまま表示」「スマホではハンバーガーボタンを表示」という切り替えを行います。

/* 基本：PC用ナビを表示し、スマホ用ボタンを隠す */
.pc-nav { display: block; }
.menu-btn { display: none; }

/* 画面幅が1000px未満（スマホ・タブレット）の場合 */
@media (max-width: 999px) {
    .pc-nav { display: none; }      /* PCメニューを消す */
    .menu-btn { display: flex; }    /* ボタンを表示 */
}

⚙️ 2. JavaScriptでクラスを付け外し

メニューの開閉は、JavaScriptで body タグにクラス（例: menu-open）をつけ外しするだけで制御します。

function toggleMenu() {
    const body = document.body;
    
    // クラスの有無をチェックして切り替え
    if (body.classList.contains('menu-open')) {
        body.classList.remove('menu-open'); // 閉じる
    } else {
        body.classList.add('menu-open');    // 開く
    }
}

これだけでOKです。あとはCSSで .menu-open .nav-menu { right: 0; } のようにスタイルを定義すれば、メニューがスライドして出てくるアニメーションが作れます。

💡 ポイント：スクロールの固定

スマホでメニューを開いた時、背景のページがスクロールしてしまうと操作性が悪いです。
そこで、メニューが開いている間はスクロールをロックする処理を加えます。

/* CSS側で制御 */
body.menu-open {
    overflow: hidden; /* スクロール禁止 */
    position: fixed;
    width: 100%;
}

JS側では、開いた瞬間のスクロール位置を保存しておき、閉じた時にそこへ戻す処理を入れると完璧です。
jQueryなどの重いライブラリを読み込まずとも、これだけのコードで快適なUIは作れます。