質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

ハンバーガーメニュー ページ内リンクをクリックすると閉じる仕様にしたいです。

tky-design
tky-design

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

292閲覧

投稿2022/11/11 02:08

実現したいこと

  • ハンバーガーメニュー ページ内リンクをクリックすると閉じる仕様にしたいです。

発生している問題・エラーメッセージ

リンクをクリックしてもメニューが閉じません。 リンク先には飛びます。

該当のソースコード

html

1ソースコード 2```<!-- スマホ用メニュー --> 3 <div class="h-menu"> 4 <input id="h-menu_checkbox" class="h-menuCheckbox" type="checkbox"> 5 <label class="h-menu_icon" for="h-menu_checkbox"><span class="hamburger-icon"></span></label> 6 <label id="h-menu_black" class="h-menuCheckbox" for="h-menu_checkbox"></label> 7 <div id="h-menu_content"> 8 <ul> 9 <li><a href="#top">TOP</a></li> 10 <li><a href="#当社について">当社について</a></li> 11 <li><a href="#取り扱いプラン一覧">取り扱いプラン一覧</a></li> 12 <li><a href="#加入事例">加入事例</a></li> 13 <li><a href="#無料見積もり・個別相談">無料見積もり・個別相談</a></li> 14 <li><a href="#お客様の声">お客様の声</a></li> 15 <li><a href="#よくあるご質問">よくあるご質問</a></li> 16 </div> 17 </div> 18```CSS 19

CSS

1 /*ハンバーガーメニュー*/ 2 .h-menu_icon { 3 display: inline-block; 4 width: 30px; 5 height: 30px; 6 vertical-align: middle; 7 } 8 9 /*3本線*/ 10 .hamburger-icon, 11 .hamburger-icon::before, 12 .hamburger-icon::after { 13 content: ''; 14 display: block; 15 position: absolute; 16 z-index: 100; 17 top: 0; 18 bottom: 0; 19 width: 25px; 20 height: 3px; 21 background: #AD0000; 22 cursor: pointer; 23 } 24 25 .hamburger-icon:before { 26 top: 10px; 27 } 28 29 .hamburger-icon:after { 30 top: 20px; 31 } 32 33 /*メニュー以外を暗くする*/ 34 #h-menu_black { 35 display: none; 36 position: fixed; 37 z-index: 98; 38 top: 0; 39 left: 0; 40 width: 100%; 41 height: 100%; 42 background: black; 43 opacity: 0; 44 transition: .7s ease-in-out; 45 } 46 47 /*中身*/ 48 #h-menu_content { 49 position: fixed; 50 top: 30px; 51 right: 0; 52 z-index: 99; 53 width: 100%; 54 max-width: 320px; 55 height: 100vh; 56 padding: 53px 16px 16px; 57 background: #f3f3f3; 58 overflow: auto; 59 transition: .3s ease-in-out; 60 -webkit-transform: translateX(-105%); 61 transform: translateX(105%); 62 } 63 64 /*チェックボックスにチェックが入ったら表示*/ 65 input:checked~.h-menu_icon .hamburger-icon { 66 background: transparent; 67 } 68 69 input:checked~.h-menu_icon .hamburger-icon::before { 70 -webkit-transform: rotate(-45deg); 71 transform: rotate(-45deg); 72 top: 10px; 73 z-index: 999; 74 } 75 76 input:checked~.h-menu_icon .hamburger-icon::after { 77 -webkit-transform: rotate(45deg); 78 transform: rotate(45deg); 79 top: 10px; 80 z-index: 999; 81 } 82 83 input:checked~#h-menu_black { 84 display: block; 85 opacity: .8; 86 } 87 88 #h-menu_checkbox:checked~#h-menu_content { 89 -webkit-transform: translateX(0%); 90 transform: translateX(0%); 91 box-shadow: 6px 0 25px rgba(0, 0, 0, .15); 92 } 93 94 .h-menu_icon .hamburger-icon, 95 .h-menu_icon .hamburger-icon::before, 96 .h-menu_icon .hamburger-icon::after, 97 #h-menu_black, 98 #h-menu_content { 99 -webkit-transition: all .3s; 100 transition: all .3s; 101 } 102 103 #h-menu_content ul { 104 list-style: none; 105 margin: 0; 106 padding: 0; 107 } 108 109 #h-menu_content ul li { 110 border-bottom: solid 1px black; 111 } 112 113 #h-menu_content li a { 114 display: block; 115 color: black; 116 font-size: 14px; 117 padding: 24px; 118 text-decoration: none; 119 transition-duration: 0.2s; 120 } 121 122 #h-menu_content li a:hover { 123 background: #ffafaf; 124 }

試したこと

teratail内で同様の質問(10個ほど)に対する回答を見ながら解決を図りましたが、うまく機能しませんでした。

補足情報(FW/ツールのバージョンなど)

こちらのサイトを参考にして、ハンバーガーメニューを作成いたしました。
https://www.kitaguniweb.com/cat-diary/2020/p-9311/

他の質問者様も同様の質問をされている中、個別に回答を求める質問をしてしまい申し訳ございません。。
どなたかご協力の程、よろしくお願いいたします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

3

ベストアンサー

jsを使用して良いならpopstateでチェックを外してください

javascript

1window.addEventListener('popstate',()=>{ 2 document.querySelector('#h-menu_checkbox').checked=false;; 3});

投稿2022/11/11 02:23

yambejp

総合スコア108988

spoofy_dragon, tky-designを押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tky-design

2022/11/11 02:37

ご回答いただいたjsの上記コードで解決いたしました! この度は迅速なご回答、誠にありがとうございました。
tky-design

2022/11/15 04:10

度々申し訳ございません。 上記コードを導入後、ディベロッパーツールでのスマホ画面の確認、サーバーアップロード後の実機での確認が済み、解決ができたかのように思われたのですが、クライアント様からWi-Fi環境下だと約10秒が経過後にメニューをタップすると閉じるが、10秒以内だとメニューが閉じないとご指摘を受けました。 こちらでWi-Fi環境下で再度確認しても正常にメニューが閉じるのですが、何かWi-Fiによって変わるようなことなどあるのでしょうか? ご教授いただけますと幸いです。
tky-design

2022/11/15 04:11

【追記】javascriptは外部ファイルにして、</body>の直前で読み込ませています。
yambejp

2022/11/15 05:19

popstateがダメならこう document.addEventListener('click', e=>{ if(e.target.nodeName=="A" && e.target.closest('.h-menu')){ document.querySelector('#h-menu_checkbox').checked=false; } });

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。