13672127621

こちらのサイト（whimsical-meringue-9c9ee0.netlify.app/）で、スマホサイズ時にハンバーガーメニューを表示させたいと考えています。\n現在、途中まで実装はできているのですが、スマホサイズではメニューが表示されず、動作しません。\n\n以下のJavaScriptを使用すると一応動作はするものの、クリック時にページ全体が再読み込みされてしまいます。\nどのように修正すればよいか、ご教示いただけますでしょうか。\n\n// // 共通パーツを読み込み\n// async function loadPart(id, file) {\n// const yomikomi = await fetch(file);\n// document.getElementById(id).innerHTML = await yomikomi.text();\n// }\n// loadPart(\u0026quot;header\u0026quot;, \u0026quot;header.html\u0026quot;);\n// loadPart(\u0026quot;footer\u0026quot;, \u0026quot;footer.html\u0026quot;);\n\n// function updateText(newText) {\n// document.getElementById(\u0026quot;display-text\u0026quot;).textContent = newText;\n// }\n\n// //参考\n// //https://breezegroup.co.jp/202004/javascript-fetch/\n\n\n// //バーガーメニューとドロワー\n\n// const hamburger_menu = document.querySelector(\u0026quot;#hamburger_menu\u0026quot;);\n// const gnav = document.querySelector(\u0026quot;nav\u0026quot;);\n\n\n// hamburger_menu.addEventListener(\u0026quot;click\u0026quot;, ()=\u0026gt;{\n// hamburger_menu.classList.toggle(\u0026quot;active\u0026quot;);\n// gnav.classList.toggle(\u0026quot;active\u0026quot;);\n// })\n\n// gnav.addEventListener(\u0026quot;click\u0026quot;, () =\u0026gt;{\n// hamburger_menu.classList.remove(\u0026quot;active\u0026quot;);\n// gnav.classList.remove(\u0026quot;active\u0026quot;);\n// })\n\n// async function loadPart(id, file) {\n// const yomikomi = await fetch(file);\n// document.getElementById(id).innerHTML = await yomikomi.text();\n\n// // ヘッダーが読み込まれた後にイベントを登録\n// if (id === \u0026quot;header\u0026quot;) {\n// const hamburger_menu = document.querySelector(\u0026quot;#hamburger_menu\u0026quot;);\n// const gnav = document.querySelector(\u0026quot;nav\u0026quot;);\n\n// if (hamburger_menu \u0026amp;\u0026amp;gnav) {\n// hamburger_menu.addEventListener(\u0026quot;click\u0026quot;, () =\u0026gt;{\n// hamburger_menu.classList.toggle(\u0026quot;active\u0026quot;);\n// gnav.classList.toggle(\u0026quot;active\u0026quot;);\n// });\n\n// gnav.addEventListener(\u0026quot;click\u0026quot;, () =\u0026gt;{\n// hamburger_menu.classList.remove(\u0026quot;active\u0026quot;);\n// gnav.classList.remove(\u0026quot;active\u0026quot;);\n// });\n// }\n// }\n// }\n\n// loadPart(\u0026quot;header\u0026quot;, \u0026quot;header.html\u0026quot;);\n// loadPart(\u0026quot;footer\u0026quot;, \u0026quot;footer.html\u0026quot;);