実現したいこと
該当サイト
- ハンバーガーメニューを正常に機能させる
前提
ここに質問の内容を詳しく書いてください。
（例）
WordPressでハンバーガーメニューの実装を作っています
https://photopizza.design/css_hamburger_menu/
上記のサイトを参考にしました
一見うまくいっているように見えるのですが、
ハンバーガーのアイコンをクリックする→ハンバーガーメニューをクリックする→ハンバーガーアイコンが×印になる→×印になったハンバーガーアイコンを二回クリックしないと再度ハンバーガーメニューが開かないという仕様になっています。
どなたかご教示ください。お願いいたします。助けてください。
該当のソースコード
ハンバーガー部分のhtml
html
1<body>2 <input type="checkbox" id="overlay-input" />3 <label for="overlay-input" id="overlay-button" class="overlay-button100"><span></span></label>4 <div id="overlay" class="overlay100">5 <ul>6 <li><a href="#consept">こだわり</a></li>7 <li><a href="#delicious">美味しさの秘訣</a></li>8 <li><a href="#menu">お品書き</a></li>9 <li><a href="#shop">店舗案内</a></li>10 <li><a href="#contact">お問い合わせ</a></li>11 <div class="text">12 <p>ご予約・お問い合わせ</p>13 <p>TEL.<span style="font-size: 24px">052-228-3075</span></p>14 <p>00:00～00:00（L.O.00:00）</p>15 <p>00:00～00:00（L.O.00:00）</p>16 <div class="web-btn">17 <a class="btn" href="#">WEB予約はこちら ></a>18 </div>19 </div>20 </ul>21 </div>22 </body>23</html>
ハンバーガーに関わるcss
css
1*{2 margin:0px;3 padding: 0px;4 box-sizing:border-box;5}6a{7 text-decoration: none;8 color:white;9}10/*--------------------------------*/11body {12 margin: 0;13 font-family: 'Yu Gothic';14 width: 100vw;15 height: 100vh;16 animation: bugfix infinite 1s;17 -webkit-animation: bugfix infinite 1s;18}19 20@keyframes bugfix {21 from {22 padding: 0;23 }24 to {25 padding: 0;26 }27}28@-webkit-keyframes bugfix {29 from {30 padding: 0;31 }32 to {33 padding: 0;34 }35}36#overlay-button {37 background-color: #B2002B;38 border-radius: 1000px;39 position: fixed;40 right: 3%;41 top: 10%;42 padding: 26px 11px;43 z-index: 5;44 cursor: pointer;45 user-select: none;46 top: 10%;47}48#overlay-button span {49 height: 1px;50 width: 35px;51 background-color: white;52 position: relative;53 display: block;54 transition: all .2s ease-in-out;55}56#overlay-button span:before {57 top: -10px;58 visibility: visible;59}60#overlay-button span:after {61 top: 10px;62}63#overlay-button span:before, #overlay-button span:after {64 height: 1px;65 width: 35px;66 background-color: white;67 position: absolute;68 content: "";69 transition: all .2s ease-in-out;70}71#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {72 background: #fff;73}74 75input[type=checkbox] {76 display: none; 77 78}79 80input[type=checkbox]:checked ~ #overlay {81 visibility: visible; 82}83 84input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {85 background: transparent;86 87 88}89input[type=checkbox]:checked ~ #overlay-button span:before {90 transform: rotate(45deg) translate(7px, 7px);91 92}93input[type=checkbox]:checked ~ #overlay-button span:after {94 transform: rotate(-45deg) translate(7px, -7px);95 96 97}98 99#overlay {100 left:0rem;101 top:0rem;102 height: 100%;103 width: 100%;104 background: #555261;105 z-index: 2;106 visibility: hidden;107 position: fixed;108}109#overlay.active {110 111}112#overlay ul {113 114 display: flex;115 justify-content: center;116 align-items: center;117 flex-direction: column;118 text-align: center;119 height: 100vh;120 padding-left: 0;121 list-style-type: none;122}123#overlay ul li {124 padding: 1em;125}126#overlay ul li a {127 color: #fff;128 text-decoration: none;129 font-size: 1.4em;130}131#overlay ul li a:hover {132 color: #BF9B6F!important;133}134 135#overlay .text{136 margin-top:30px;137}138#overlay p{139 color: white;140 text-align: center;141}142 143#overlay .btn{144 background-color:#B2002B;145 padding:10px 30px;146}147 148#overlay .web-btn{149 margin-top:30px;150}151 152/* .elementor-44 .elementor-element.elementor-element-93fa71d { 153 padding: 0px 0px 0px 0px; 154} */155 156@media screen and (max-width:820px) {157#overlay-button {158 top: 3%;159}160}161 162 163 164@media screen and (max-width: 768px){165#overlay-button {166 top: 6%;167}168 .elementor-sticky--active {169 transform: translate(0%, 160%)!important;170}171}172@media screen and (max-width:767px) {173.elementor-44 .elementor-element.elementor-element-93fa71d {174 padding: 0px 0px 0px 0px;175}176 177}178 179@media screen and (max-width: 688px){180#overlay-button {181 top: 6%;182}183}184@media screen and (max-width:414px) {185 #overlay-button {186 top: 6%; 187 }188}189@media screen and (max-width:375px) {190#overlay-button {191 top: 9%;192}193 194}195.overlay_hidden{196 visibility:hidden!important;197}198 199.overlay_open{200 visibility:visible!important;201}
jQuery
1<script> 2 3 4 5 6 jQuery(function() { 7 8 jQuery('#overlay li').click(function() { 9 jQuery('.overlay100').addClass('overlay_hidden'); 10 jQuery('.overlay100').removeClass('overlay_open'); 11 }); 12 13}); 14 15 jQuery(function() { 16 17 jQuery('.overlay-button100').click(function() { 18 var open=jQuery('.overlay100').hasClass('overlay_hidden'); 19 if(open) { 20 console.log('オーバーレイ見っけ'); 21 jQuery('.overlay100').removeClass('overlay_hidden'); 22// jQuery('.overlay100').addClass('overlay_open'); 23} else { 24 25 console.log('オーバーレイ見っけ'); 26 27} 28 }); 29 30}); 31 32 33 34 35</script> 36 37<script> 38jQuery(function() { 39 40 jQuery('.overlay-button100').click(function() { 41 var close=jQuery('.overlay100').hasClass('overlay_open'); 42 if(close){ 43 console.log('オーバーレイ見っけた2'); 44 jQuery('.overlay100').removeClass('overlay_open'); 45 }else { 46 47 console.log('オーバーレイ見っけ2'); 48 49} 50 }); 51 52}); 53 54</script> 55<script> 56 57 jQuery(function() { 58 59 jQuery('#overlay-button').click(function() { 60 var open=jQuery('.overlay100').hasClass('overlay_hidden'); 61 if(open) { 62 console.log('オーバーレイ見つけました'); 63 jQuery('.overlay100').addClass('overlay_open'); 64 jQuery('.overlay100').removeClass('overlay_hidden'); 65 66} else { 67 68 console.log('オーバーレイ見つけました2'); 69 70} 71 }); 72 73}); 74 75 76</script>
試したこと
検証ツールで見る限り、下の部分がうまく機能していないようで、
jQuery
1<script> 2 3 jQuery(function() { 4 5 jQuery('#overlay-button').click(function() { 6 var open=jQuery('.overlay100').hasClass('overlay_hidden'); 7 if(open) { 8 console.log('オーバーレイ見つけました'); 9 jQuery('.overlay100').addClass('overlay_open'); 10 jQuery('.overlay100').removeClass('overlay_hidden'); 11 12} else { 13 14 console.log('オーバーレイ見つけました2'); 15 16} 17 }); 18 19}); 20 21 22</script>
下記↓のように書き方を変えるとさらにおかしくなりました
jQuery
1<script> 2jQuery(function() { 3 // 「#hide-text」要素に対するclickイベントを作成してください 4 jQuery('#overlay li').click(function() { 5 jQuery('input[type=checkbox]:checked ~ #overlay').css('visibility','hidden'); 6 }); 7 8}); 9 10 11</script> 12 13<script> 14jQuery(function() { 15 16 jQuery('.overlay-button100').click(function() { 17 if(jQuery('input[type=checkbox]:checked ~ #overlay').css('visibility','hidden')){ 18 jQuery('input[type=checkbox]:checked ~ #overlay').css('visibility','visible!important'); 19 } 20 }); 21 22}); 23 24 25 26 27</script>
補足情報（FW/ツールのバージョンなど）
WordPress 6.2.2
0 コメント