実現したいこと
ハンバーガーメニュー内にaタグで設置したボタンが効かない。
ボタンをクリック（タップ）し、リンクに飛ばしたいです。
発生している問題・分からないこと
ハンバーガーメニュー内にaタグで設置したボタンが効かないです。
ボタンをクリック（タップ）し、リンクに飛ばしたいです。
ハンバーガーメニュー以外に設置したボタンには問題ありません。
どなたかご教授いただけますと幸いです。どうぞよろしくお願いいたします。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="description" content="リスブランは、メディカルフェムケア専門サロンです。ライフステージごとに変化する女性特有の悩みに寄り添い、自分らしく活躍できるようサポートするプライベートサロンです。"> 7 <title>メディカルフェムケア専門｜リスブラン</title> 8 9 <meta property="og:site_name" content="メディカルフェムケア専門｜リスブラン" /> 10 <meta property="og:title" content="メディカルフェムケア専門｜リスブラン"> 11 <meta property="og:description" content="リスブランは、メディカルフェムケア専門サロンです。ライフステージごとに変化する女性特有の悩みに寄り添い、自分らしく活躍できるようサポートするプライベートサロンです。"> 12 <meta property="og:type" content="article"> 13 <meta property="og:url" content="https://www.lysblanc-fam.com/"> 14 <meta property="og:locale" content="ja_JP"> 15 16 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css"> 17 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/> 18 <link rel="shortcut icon" href="./favicon.ico"> 19 <link rel="stylesheet" href="css/style.css"> 20</head> 21<body> 22 <!-- ヘッダー --> 23 <header class="header header-bg"> 24 <div class="header__contact"> 25 <h1 class="header__logo"> 26 <a href="#"><picture> 27 <source media="(max-width:999px)" srcset="images/sp_header-ogo.png"> 28 <source media="(min-width:1000px)" srcset="images/header-logo.png"> 29 <img src="images/header-logo.png" alt="Lysblanc"> 30 </picture></a> 31 </h1> 32 <div class="header__contact-group"> 33 <div class="header__menu header-menu-active"> 34 <!--ヘッダーナビゲーション--> 35 <nav class="header-nav serif"> 36 <ul class="header-nav__group1"> 37 <li class="header-list"><a href="#feature">リスブランの特徴 /</a></li> 38 <li class="header-list"><a href="#reviews">お客様の声 /</a></li> 39 <li class="header-list"><a href="#menu">メニュー /</a></li> 40 <li class="header-list"><a href="#flow">施術の流れ</a></li> 41 </ul> 42 <ul class="header-nav__group2"> 43 <li class="header-list"><a href="#qa">よくある質問 /</a></li> 44 <li class="header-list"><a href="#idea">理念 /</a></li> 45 <li class="header-list"><a href="#acsess">アクセス・店舗情報</a></li> 46 </ul> 47 </nav> 48 <!--ハンバーガーリスト--> 49 <nav class="hamburger-list serif"> 50 <ul class="hamburger-list__group"> 51 <li class="header-list"><a class="hamburger-list__icon1" href="index.html">ホーム</a></li> 52 <li class="header-list"><a class="hamburger-list__icon2" href="#feature">リスブランの特徴</a></li> 53 <li class="header-list"><a class="hamburger-list__icon3" href="#reviews">お客様の声</a></li> 54 <li class="header-list"><a class="hamburger-list__icon4" href="#menu">メニュー</a></li> 55 <li class="header-list"><a class="hamburger-list__icon5" href="#flow">施術の流れ</a></li> 56 <li class="header-list"><a class="hamburger-list__icon6" href="#qa">よくある質問</a></li> 57 <li class="header-list"><a class="hamburger-list__icon7" href="#idea">理念</a></li> 58 <li class="header-list"><a class="hamburger-list__icon8" href="#acsess">アクセス・店舗情報</a></li> 59 </ul> 60 <!--ご予約ボタン--> 61 <div class="reserveBtn-humburger serif"> 62 <a href="https://lin.ee/yYSykht?fbclid=PAZXh0bgNhZW0CMTEAAaby5VlkzGcmo1mGhDykBt_ggWSuJVvZf4HrqvEhJdtPNFwdKlVTeS26QQ0_aem_hPvJ0NoIBO4LKQfQlyl8Jw"><span></span>ご予約はこちら</a> 63 </div> 64 </nav> 65 </div> 66 <!--ご予約ボタン--> 67 <div class="reserveBtn serif sp-none"> 68 <a class="header__contactBtn" href="https://lin.ee/yYSykht?fbclid=PAZXh0bgNhZW0CMTEAAaby5VlkzGcmo1mGhDykBt_ggWSuJVvZf4HrqvEhJdtPNFwdKlVTeS26QQ0_aem_hPvJ0NoIBO4LKQfQlyl8Jw">ご予約はこちら</a> 69 </div> 70 </div> 71 <!--ハンバーガーボタン--> 72 <button class="hamburger-menu" id="js-hamburger-menu"> 73 <span class="hamburger-menu__bar"></span> 74 <span class="hamburger-menu__bar"></span> 75 <span class="hamburger-menu__bar"></span> 76 </button> 77 </div> 78 </header> 79</body> 80</html>
JS
1//ハンバーガーボタン 2$(function () { 3 $('#js-hamburger-menu, .navigation__link').on('click', function () { 4 $('.navigation').slideToggle(500) 5 $('.hamburger-menu').toggleClass('hamburger-menu--open') 6 }); 7}); 8 9//ハンバーガーメニュー slide In 10var hamburger = $('.hamburger-list'); 11//open/closeボタンをクリックしたら表示・非表示を繰り返す 12$('.hamburger-menu').on('click', function () { 13//console.log('click'); 14 hamburger.toggleClass('hamburger-list-active'); 15}); 16 17//画面幅が変わったらハンバーガーメニューを閉じる 18$(window).on('resize', function () { 19 hamburger.removeClass('hamburger-list-active'); 20}); 21 22//リンクをクリックしたらメニュー閉じる 23$(".hamburger-list__group a[href]").on("click", function() { 24 var windowWidth = window.innerWidth; 25 if (windowWidth <= 767) { 26 $('.hamburger-menu').trigger('click'); 27 } 28 });
CSS
1 /* ハンバーガー内 ご予約ボタン */2@media (min-width: 1000px) { //PC非表示 3 .reserveBtn-humburger {4 display: none 5 }6}7 8.reserveBtn-humburger {9 display: inline-block;10 width: 100%;11 position: relative;12 color: #fff; /* 文字色 */13 border-radius: 0;14 background: $Cbtn; /* 背景色 */15 padding: 1vw;16 font-size: 2rem;17 white-space: nowrap;18 text-decoration: none;19 text-align: center;20 box-sizing: border-box;21 margin: 0 auto;22 max-width: 25rem; 23 24 &::before { //ボタン内側の線 25 position: absolute;26 top: 4.5px;27 left: 4.5px;28 width: calc(100% - 9px);29 height: calc(100% - 9px);30 content: "";31 transition: all 0.3s;32 border: 1px solid #fff;33 }34 35 &::after { //ボタン右下の三角部分 36 content: "";37 position: absolute;38 bottom: 7px;39 right: 7px;40 width: 0;41 height: 0;42 border-left: 10px solid transparent;43 border-top: 10px solid #fff;44 transition: all 0.3s ease;45 transform: rotate(90deg);46 }47}48@media (max-width: 767px) {49 .reserveBtn-humburger {50 margin-left: 10vw;51 margin-top: 10vw;52 }53}54 55 56.reserveBtn-humburger span::before {57 content: url(../images/LINE_Brand_icon.png);58 vertical-align: middle;59 margin-right: 1.5rem;60}61@media (max-width: 767px) {62 .reserveBtn-humburger span::before {63 margin-top: -0.5rem;64 content: "";65 display: inline-block;66 width: 20px;67 height: 20px;68 background-image: url(../images/LINE_Brand_icon.png);69 background-size: contain;70 vertical-align: middle;71 margin-right: 1rem;72 }73}74 75.reserveBtn-humburger a {76 color: #fff;77}78
試したこと・調べたこと
上記の詳細・結果
aタグの閉じ忘れ確認
jsの確認
補足
特になし
0 コメント