Question
ページ内リンク遷移時にハンバーガーメニューを閉じたい
- 村 村田裕誠
-
お世話になります。
スマホのハンバーガーメニューの中に「ページ内リンク（#から始まるアンカーリンク）」を設置しています。 リンクをタップすると該当箇所へ遷移はするのですが、メニューが開いたまま画面に残ってしまいます。
ハンバーガーメニューの中に「料金表」のみ、ページ内リンクで設定してます。
遷移と同時にメニューを閉じる（トグルをオフにする）方法はありますでしょうか？ 追加CSSやJSが必要な場合、JIN:R推奨の記述があれば教えていただきたいです。
よろしくお願いいたします。- JIN:R 1.4.0
- Conoha Wing
- GoogleChrome
- macOS 15 Sequoia
-
画像とURLのご共有ありがとうございます。
2025/12/23 23:47大変恐れ入りますが、個別環境に合わせたJSの調整などはサポート対象外となっております。ご了承いただけますと幸いです。
なお、本件は改善のご要望として開発チームに共有いたします。
代替案のご案内になってしまいますが、ハンバーガーメニュー内の他のメニューと同様に、「料金表」を固定ページとして作成し、そちらへ遷移する形で運用いただく方法も一案かと思います。
ご希望に沿えず恐縮ではございますが、ご確認のほどよろしくお願いいたします。
ご返信ありがとうございます。 個別のカスタマイズ（JS調整）についてはサポート対象外である旨、承知いたしました。
2025/12/24 03:34また、代替案として固定ページへの遷移のご提案もいただきありがとうございます。 現状の構成と照らし合わせて検討させていただきます。
トップページをLP（ランディングページ）風に構成し、メニューからページ内遷移させたいというニーズは今後も少なくないかと思いますので、開発チーム様にて機能改善としてご検討いただけますと幸いです。
お忙しい中、ご確認いただきありがとうございました。 今後ともよろしくお願いいたします。
その後、自力で検証を行い、JavaScriptを用いることで「ページ内リンク遷移時にハンバーガーメニューを閉じる」挙動を実装できましたので、共有させていただきます。
2025/12/24 04:18【実装方法】 ダッシュボードの「JIN:R設定」＞「計測タグ設定」＞「bodyタグ終了直前に記載するタグ」に、以下のスクリプトを追加しました。
「
document.addEventListener('DOMContentLoaded', function() {
// ハンバーガーボタンを取得
const hamburger = document.querySelector('.js--hamburger-trigger');
// ページ内の「#」を含むリンクをすべて監視
const links = document.querySelectorAll('a[href*="#"]');
if (hamburger) {
links.forEach(function(link) {
link.addEventListener('click', function() {
// メニューが開いている状態(js--hamburger-activeが付与されている)なら
// 0.2秒後にボタンをクリックして閉じる
if (hamburger.classList.contains('js--hamburger-active')) {
setTimeout(function(){
hamburger.click();
}, 200);
}
});
});
}
});
」
お世話になっております。
2025/12/24 08:19ご丁寧なご返信と、検証結果の共有までいただきありがとうございます。
開発チームにも共有済みですので、今後の検討材料とさせていただければと思います。
引き続き、よろしくお願い申し上げます。