実現したいこと
- ハンバーガーメニュー ページ内リンクをクリックすると閉じる仕様にしたいです。
発生している問題・エラーメッセージ
リンクをクリックしてもメニューが閉じません。 リンク先には飛びます。
該当のソースコード
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/
他の質問者様も同様の質問をされている中、個別に回答を求める質問をしてしまい申し訳ございません。。
どなたかご協力の程、よろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/11/11 02:37
2022/11/15 04:10
2022/11/15 04:11
2022/11/15 05:19