Q&A
ご提示のコードを試してみましたが、「キャンペーン」などのリンクをクリックすると、グーグルに移動しました。
iPhoneSE iOS14.4 Firefox
ご存知と思いますが、iOSでは基本的にブラウザはすべてSafariが皮をかぶったものです。
前提・実現したいこと
html, css, javascriptを利用しハンバーガーメニューを作成しました。
iphone以外の端末ではハンバーガーメニューのアンカーリンクは動作しているのですが、iphone端末ではリンク先へとばず、ハンバーガーメニューが閉じてしまいます。（SafariでもChromeでも閉じてしまいます）
他のAndroid端末ではしっかりリンク先に飛ぶのですが、どうしてもiphoneのみうまくリンクへ飛んでくれません。
どなたかご教示いただければ幸いです。
発生している問題・エラーメッセージ
iphone端末でハンバーガーメニュー内のリンク先へ飛ばない
該当のソースコード
HTML
1<body> 2 <header> 3 <div class="container header-wrapper"> 4 <div class="el_humburger"><!--ハンバーガーボタン--> 5 <div class="el_humburger_wrapper"> 6 <span class="el_humburger_bar top"></span> 7 <span class="el_humburger_bar middle"></span> 8 <span class="el_humburger_bar bottom"></span> 9 <span class="middle menu js_menuOpen" id="menu">menu</span> 10 </div> 11 </div> 12 <div class="navi container"><!--ナビゲーション--> 13 <div class="navi_inner"> 14 <div class="navi-menu-wrapper"> 15 <div class="navi-menu"> 16 <a href="https://www.google.co.jp/"> 17 <p>ムービー</p> 18 </a> 19 <a href="https://www.google.co.jp/"> 20 <p>ムービー</p> 21 </a> 22 <a href="https://www.google.co.jp/"> 23 <p>比較</p> 24 </a> 25 </div> 26 <div class="navi-menu"> 27 <a href="https://www.google.co.jp/"> 28 <p>料金</p> 29 </a> 30 <a href="https://www.google.co.jp/"> 31 <p>キャンペーン</p> 32 </a> 33 <a href="https://www.google.co.jp/"> 34 <p>流れ</p> 35 </a> 36 </div> 37 <div class="navi-menu"> 38 <a href="https://www.google.co.jp/"> 39 <p>形式</p> 40 </a> 41 <a href="https://www.google.co.jp/"> 42 <p>よくある質問</p> 43 </a> 44 <a href="https://www.google.co.jp/"> 45 <p>口コミ</p> 46 </a> 47 </div> 48 <div class="navi-contact-wrapper"> 49 <a href="https://www.google.co.jp/"> 50 <p>LINEで依頼</p> 51 </a> 52 <a href="https://www.google.co.jp/"> 53 <p>制作依頼</p> 54 </a> 55 </div> 56 <div class="utility"> 57 <a href="https://www.google.co.jp/">会</a> 58 <a href="https://www.google.co.jp/">プ</a> 59 <a href="https://www.google.co.jp/">特</a> 60 </div> 61 <div class="information"> 62 <a href="https://www.google.co.jp/"> 63 <p>test</p> 64 </a> 65 <p>0</p> 66 <p>TEL：</p> 67 </div> 68 </div> 69 </div><!--end navi-inner--> 70 </div><!--end navi--> 71 </div> 72 </header> 73 74 <footer> 75 <div id="footer-contact" class="footer-contact-wrapper for-sp"> 76 <a href="https://www.google.co.jp/" class="mail footer-mail"> 77 <p>制作依頼</p> 78 </a> 79 <a href="https://www.google.co.jp/" class="line footer-line"> 80 <p>LINEで依頼</p> 81 </a> 82 </div> 83 </footer> 84</body> 85</html>
sass
1 /*ハンバーガーボタン*/ 2 .el_humburger { 3 position: fixed; 4 -webkit-box-sizing: border-box; 5 box-sizing: border-box; 6 z-index: 20;} 7 8 .el_humburger_wrapper { 9 display: inline-block; 10 position: relative; 11} 12 .js_humburgerOpen .el_humburger_text.el_humburger_text__menu { 13 display: none; } 14 15 .el_humburger_text.el_humburger_text__close { 16 display: none; } 17 18 .js_humburgerOpen .el_humburger_text.el_humburger_text__close { 19 display: block; } 20 21 .el_humburger span.el_humburger_bar { 22 display: block; 23 -webkit-transition: all .2s ease-in-out; 24 -o-transition: all .2s ease-in-out; 25 transition: all .2s ease-in-out; } 26 .js_humburgerOpen .el_humburger span.el_humburger_bar.top { 27 -webkit-transform: translateY(7px) rotate(-45deg); 28 -ms-transform: translateY(7px) rotate(-45deg); 29 transform: translateY(7px) rotate(-45deg); 30} 31 .menu { 32 position: absolute; 33 } 34 .js_humburgerOpen .el_humburger span.el_humburger_bar.bottom { 35 -webkit-transform: translateY(-9px) rotate(45deg); 36 -ms-transform: translateY(-9px) rotate(45deg); 37 transform: translateY(-9px) rotate(45deg); 38 } 39 .el_humburgerButton__close span.el_humburger_bar { 40 display: block; 41 } 42 43 .el_humburgerButton__close span.el_humburger_bar.top { 44 -webkit-transform: translateY(5px) rotate(-45deg); 45 -ms-transform: translateY(5px) rotate(-45deg); 46 transform: translateY(5px) rotate(-45deg); 47} 48 49 50 .el_humburgerButton__close span.el_humburger_bar.bottom { 51 -webkit-transform: translateY(-6px) rotate(45deg); 52 -ms-transform: translateY(-6px) rotate(45deg); 53 transform: translateY(-6px) rotate(45deg); 54} 55 56 .navi { 57 position: fixed; 58 z-index: 3; 59 transform: translateZ(1px); 60 -webkit-box-sizing: border-box; 61 box-sizing: border-box; 62 -webkit-transition: all 300ms ease-out; 63 -o-transition: all 300ms ease-out; 64 transition: all 300ms ease-out; 65 overflow: auto; 66 } 67 68 .navi-menu { 69 a { 70 padding: 10px; 71 width: 30%; 72 text-align: center; 73 border: 1px solid $lightGray; 74 border-bottom: 3px solid $lightBrown; 75 color: $lightBrown; 76 z-index: 1000; 77 transform: translateZ(1px); 78 79 } 80 }
javascript
1//変数定義 2var navigationOpenFlag = false; 3var navButtonFlag = true; 4var focusFlag = false; 5 6//ハンバーガーメニュー 7 $(function(){ 8 9 $(document).on('click','.el_humburger',function(){ 10 if(navButtonFlag){ 11 spNavInOut.switch(); 12 //一時的にボタンを押せなくする 13 setTimeout(function(){ 14 navButtonFlag = true; 15 },200); 16 navButtonFlag = false; 17 } 18 }); 19 $(document).on('click touchend', function(event) { 20 if (!$(event.target).closest('.el_humburger').length && $('body').hasClass('js_humburgerOpen') && focusFlag) { 21 focusFlag = false; 22 scrollBlocker(false); 23 spNavInOut.switch(); 24 } 25 }); 26 }); 27 28//ナビ開く処理 29function spNavIn(){ 30 $('body').removeClass('js_humburgerClose'); 31 $('body').addClass('js_humburgerOpen'); 32 $('#menu').removeClass('js_menuOpen'); 33 $('#menu').addClass('js_menuClose'); 34 $('#footer-contact').addClass('display-none'); 35 setTimeout(function(){ 36 focusFlag = true; 37 },200); 38 setTimeout(function(){ 39 navigationOpenFlag = true; 40 },200); 41} 42 43//ナビ閉じる処理 44function spNavOut(){ 45 $('body').removeClass('js_humburgerOpen'); 46 $('body').addClass('js_humburgerClose'); 47 $('#menu').removeClass('js_menuClose'); 48 $('#menu').addClass('js_menuOpen'); 49 $('#footer-contact').removeClass('display-none'); 50 setTimeout(function(){ 51 $(".uq_spNavi").removeClass("js_appear"); 52 focusFlag = false; 53 },200); 54 navigationOpenFlag = false; 55} 56 57//ナビ開閉コントロール 58var spNavInOut = { 59 switch:function(){ 60 if($('body.spNavFreez').length){ 61 return false; 62 } 63 if($('body').hasClass('js_humburgerOpen')){ 64 spNavOut(); 65 } else { 66 spNavIn(); 67 } 68 } 69};
試したこと
z-indexの差異、スクロール時のJavaScriptが影響しているのかと考え、該当箇所を消去するなどの対応を行なってみましたが、解決できませんでした。
補足情報（FW/ツールのバージョンなど）
iphone6s, 7, 10, 11, 12で動作していないことを確認しています。safari, iosは最新バージョンです。
開発環境はVScodeを利用しています。
初めての質問でわかりづらい部分があるかと思いますが、どなたか子教示いただければ幸いです。
よろしくお願いいたします。
回答1件
0
自己解決
Javascriptを書き換えるとどの端末でも表示されるようになりました。```javascript
function hamburger() {
document.getElementById('line1').classList.toggle('hamburger-top');
document.getElementById('line2').classList.toggle('hamburger-middle');
document.getElementById('line3').classList.toggle('hamburger-bottom');
document.getElementById('menu').classList.toggle('js_menuClose');
document.getElementById('nav').classList.toggle('in');
};
document.getElementById('hamburger').addEventListener('click' , function () {
hamburger();
} );
投稿2021/02/03 13:03
総合スコア0
あなたの回答
tips
プレビュー
