前提・実現したいこと
iphoneでのハンバーガーメニュー内アンカーリンクを有効化したい
ここに質問の内容を詳しく書いてください。
HTML, css, javascriptを使用し、ハンバーガーメニューを作りました。
iphone以外の端末では問題なく動いているのですが、iphoneのみハンバーガーメニュー内のアンカーリンクがうまく作動しません。
これを解決するためにどなたかご教授いただければ幸いです。
発生している問題・エラーメッセージ
iphone端末でハンバーガーメニュー内のリンクがうまく動作しない
### 該当のソースコード ```HTML ソースコード ```<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <link rel="stylesheet" href="css/style.min.css"> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> </head> <body> <header> <div class="container header-wrapper"> <div class="logo_wrapper"> <a href="#" class="text_logo"> <p>testtest</p> <img src="image/logo.jpg" alt="logo"> </a> </div> <div class="contact-wrapper for-pc"> <a href="" class="line"><i class="fab fa-line fa-lg"></i>LINEで依頼</a> <a href="" class="mail"><i class="fas fa-envelope fa-lg"></i>制作依頼</a> </div> <div class="el_humburger"><!--ハンバーガーボタン--> <div class="el_humburger_wrapper"> <span class="el_humburger_bar top"></span> <span class="el_humburger_bar middle"></span> <span class="el_humburger_bar bottom"></span> <span class="middle menu js_menuOpen" id="menu">menu</span> </div> </div> <div class="navi container"><!--ナビゲーション--> <img src="image/logo.jpg" alt="logo" class="sp-top-logo for-sp"> <div class="navi_inner"> <div class="navi-menu-wrapper"> <div class="navi-menu"> <a href="https://www.google.co.jp/"> <i class="fab fa-youtube fa-3x"></i> <p>ムービー</p> </a> <a href="https://www.google.co.jp/"> <i class="fas fa-camera fa-3x"></i> <p>ムービー</p> </a> <a href="https://www.google.co.jp/"> <i class="fas fa-church fa-3x"></i> <p>比較</p> </a> </div> <div class="navi-menu"> <a href="https://www.google.co.jp/"> <i class="fas fa-yen-sign fa-3x"></i> <p>料金</p> </a> <a href="https://www.google.co.jp/"> <i class="fas fa-percentage fa-3x"></i> <p>キャンペーン</p> </a> <a href="https://www.google.co.jp/"> <i class="fab fa-stack-overflow fa-3x"></i> <p>流れ</p> </a> </div> <div class="navi-menu"> <a href="https://www.google.co.jp/"> <i class="fas fa-compact-disc fa-3x"></i> <p>形式</p> </a> <a href="https://www.google.co.jp/"> <i class="far fa-question-circle fa-3x"></i> <p>よくある質問</p> </a> <a href="https://www.google.co.jp/"> <i class="far fa-user-circle fa-3x"></i> <p>口コミ</p> </a> </div> <div class="navi-contact-wrapper"> <a href="https://www.google.co.jp/"> <i class="fab fa-line fa-2x"></i> <p>LINEで依頼</p> </a> <a href="https://www.google.co.jp/"> <i class="fas fa-envelope fa-2x"></i> <p>制作依頼</p> </a> </div> <div class="utility"> <a href="https://www.google.co.jp/">会社概要</a> <a href="https://www.google.co.jp/">プライバシーポリシー</a> <a href="https://www.google.co.jp/">特定商取引法</a> </div> <div class="information"> <a href="https://www.google.co.jp/"> <img src="image/logo.jpg" alt="logo"> <p>test</p> </a> <p>営業時間:平日12:00〜20:00</p> <p>TEL:0120−999-999</p> </div> </div> </div><!--end navi-inner--> </div><!--end navi--> </div> </header> <div class="mainView"> <!--ページコンテンツ--> </div> <footer> <div id="footer-contact" class="footer-contact-wrapper for-sp"> <a href="https://www.google.co.jp/" class="mail footer-mail"> <i class="fas fa-envelope fa-2x"></i> <p>制作依頼</p> </a> <a href="https://www.google.co.jp/" class="line footer-line"> <i class="fab fa-line fa-2x"></i> <p>LINEで依頼</p> </a> </div> </footer> <!--CDNでjQuery読み込む--> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script type="text/javascript" src="jQuery.js"></script> </body> </html> ```scss ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。