Q&A
特に問題ないく動作しているようですが、どういう動作環境でチェックされているのでしょうか？
実現したいこと
ページ内リンクをタップした時にハンバーガーメニューを閉じるようにしたいです。
発生している問題・分からないこと
CSSのみでハンバーガーメニューを実装したく、株式会社アーティス様( https://www.asobou.co.jp/blog/web/css-menu )のサイトを参考にスマホ版のみハンバーガーメニューを実装しました。メニュー自体は実装できたのですが、ページ内リンクに飛んだ際、JSを記述してみたものの、作動しませんでした。
様々なサイト様を参考にしたものの、何をどうしたら良いか全く分かっておりません。
浅学の身で恐縮なのですが、ご教示いただけますと幸いです。
該当のソースコード
HTML
1<script 2src="https://code.jquery.com/jquery-3.7.1.min.js" 3integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 4crossorigin="anonymous"></script> 5</head> 6 7<body> 8 9<!-- header --> 10<div class="header" id="top"> 11 <header class="header"> 12 <div class="header--menu"> 13 <h1 class="header--icon"><img src="img/ icon header.png"></h1> 14 <h1 class="header--logo"><a href="#top"><img class="pc" src="img/logo.png" ><img class="sp" src="img/sp header logo.png"></a></h1> 15 <div class="header--tel"><a href="tel:0000000000">☎ </a></div> 16</div> 17<div class="menu pc"> 18 <ul class="menu--list"> 19 <li class="menu--list--item"><a href="#A">A</a></li> 20 <li class="menu--list--item"><a href="B.html">B</a></li> 21 <li class="menu--list--item"><a href="C.html">C</a></li> 22 <li class="menu--list--item"><a href="#D">D</a></li> 23 <li class="menu--list--item"><a href="#E">E</a></li> 24 <li class="menu--list--item"><a href="#F">F</a></li> 25 </ul> 26</div> 27 28<!-- ハンバーガーメニュー --> 29<header> 30 <div class="hamburger-menu sp" > 31 <input type="checkbox" id="menu-btn-check"> 32 <label for="menu-btn-check" class="menu-btn"><span></span></label> 33 <!--ここからメニュー--> 34 <div class="menu-content" id="hamburger"> 35 <ul> 36 <li> 37 <a href="index.html#A">A</a> 38 </li> 39 <li> 40 <a href="B.html">B</a> 41 </li> 42 <li> 43 <a href="C.html">C</a> 44 </li> 45 <li> 46 <a href="index.html#D">D</a> 47 </li> 48 <li> 49 <a href="index.html#E">E</a> 50 </li> 51 <li> 52 <a href="index.html#F">F</a> 53 </li> 54 </ul> 55 </div> 56 <!--ここまでメニュー--> 57 </div> 58</header> 59 60</header>
CSS
1@media (max-width: 500px) { 2 body{ 3 font-size: 14px; 4 } 5 .sp{ 6 display: block; 7 } 8 .pc{ 9 display: none; 10 } 11 12 /* header */ 13 .header--menu{ 14 width: 100%; 15 height: 75px; 16 } 17 18/* ハンバーガーメニュー */ 19.menu-btn { 20 position: fixed; 21 top: 10px; 22 right: 75px; 23 display: flex; 24 height: 60px; 25 width: 60px; 26 justify-content: center; 27 align-items: center; 28 z-index: 90; 29 background-color: #10D143; 30} 31.menu-btn span, 32.menu-btn span:before, 33.menu-btn span:after { 34 content: ''; 35 display: block; 36 height: 3px; 37 width: 25px; 38 border-radius: 3px; 39 background-color: #ffffff; 40 position: absolute; 41} 42.menu-btn span:before { 43 bottom: 8px; 44} 45.menu-btn span:after { 46 top: 8px; 47} 48 49#menu-btn-check:checked ~ .menu-btn span { 50 background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/ 51} 52#menu-btn-check:checked ~ .menu-btn span::before { 53 bottom: 0; 54 transform: rotate(45deg); 55} 56#menu-btn-check:checked ~ .menu-btn span::after { 57 top: 0; 58 transform: rotate(-45deg); 59} 60 61#menu-btn-check { 62 display: none; 63} 64 65.menu-content { 66 width: 100%; 67 height: 100%; 68 position: fixed; 69 top: 0; 70 left: 0; 71 z-index: 80; 72 background-color: #10D143; 73} 74.menu-content ul { 75 padding: 70px 10px 0; 76} 77.menu-content ul li { 78 border-bottom: solid 1px #ffffff; 79 list-style: none; 80} 81.menu-content ul li a { 82 display: block; 83 width: 100%; 84 font-size: 15px; 85 box-sizing: border-box; 86 color:#ffffff; 87 text-decoration: none; 88 padding: 9px 15px 10px 0; 89 position: relative; 90} 91.menu-content ul li a::before { 92 content: ""; 93 width: 7px; 94 height: 7px; 95 border-top: solid 2px #ffffff; 96 border-right: solid 2px #ffffff; 97 transform: rotate(45deg); 98 position: absolute; 99 right: 11px; 100 top: 16px; 101} 102 103.menu-content { 104 width: 100%; 105 height: 100%; 106 position: fixed; 107 top: 0; 108 left: 100%;/*leftの値を変更してメニューを画面外へ*/ 109 z-index: 80; 110 background-color: #10D143; 111 transition: all 0.5s;/*アニメーション設定*/ 112} 113 114#menu-btn-check:checked ~ .menu-content { 115 left: 0;/*メニューを画面内へ*/ 116} 117/* ハンバーガーここまで */
Javascript
1$('.hamburger-menu a[href]').on('click', function(event) { 2 $('#menu-btn-check').trigger('click'); 3});
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
同様のサイトをいくつか拝見しまして、何処をどう指定したら良いか理屈はぼんやりと分かったのですが、実装するのにはどうしたらよいか分かりませんでした。
補足
個人が特定できてしまいそうな箇所の記述は省略しています。
HTMLをご提示ください。
HTMLをご提示ください。
すみません、見落としをしていました。失礼しました。
動作環境はGoogle ChromeとMicrosoft Edgeのデベロッパーモードです。先ほどもう一度確認したのですが、やはりうまく動きませんでした。
>うまく動きませんでした。
私の回答のやつでも想定と違いますか？
ご回答頂いたものですと問題なく動きました。
>ご回答頂いたものですと問題なく動きました。
であれば、私の回答の通りにすればよいのでは？
追記しておきましたがmetaタグをいれるといけるかもしれません
回答1件
0
ベストアンサー
特に問題なさそうです
参考
オリジナルのソースとの違いは以下を追記したことくらいです
html
1<meta name="viewport" content="width=device-width, initial-scale=1.0">
投稿2025/04/07 00:52
編集2025/04/09 03:56総合スコア117548
あなたの回答
tips
プレビュー
