前提・実現したいこと
meanmenuにてハンバーガーメニューを作成しました。
図の上部のメニューの箇所です。
メニュー自体はできており、メニュー内スクロールも実装しました。
このスクロール実装の為に、以下URLと同じ手順でcssに高さ100%をメニュー範囲に指定しました。
https://teratail.com/questions/169830
しかし、高さ100%を指定した後からスマホ幅でページ内のボタンクリックが出来なくなりました。
図の募集要項一覧や、勤務地一覧のボタンが押せません。
ハンバーガーメニューが出ていても、最小化していてもクリックが効きません。
メニュー内スクロールを実現しつつ、ページコンテンツのクリックにも影響を及ぼさない方法がありましたら
ご教授お願いしたいと思っております。
宜しくお願いいたします。
試したこと
ハンバーガーメニュー自体の高さを調整したのですが、コンテンツより上にくるようにハンバーガーメニューが固定されるとやはりクリックが効かなくなります。
ソース
Lhankor_Mhy様よりアドバイス頂きましたので追記させていただきます。ご指摘ありがとうございました。
htmlにはcssで指定した.mean-container .mean-bar のクラス指定箇所はありません。
css
1.mean-container .mean-bar {/*----ナビの100%の枠--*/ 2 float: left; 3 width: 100%; 4 padding: 4px 0; 5 min-height: 42px; 6 z-index: 9999; 7 position: absolute;/*--position: relative; へ変更すると画面ごと下がるメニューになります-*/ 8 position: fixed; 9 overflow-y: auto;/*--ナビ内スクロールの記述①--*/ 10 /*--height: 100%; ナビ内スクロールを実現させる為に必要だが、実装するとページ内のボタンがおせなくなる2019.913--*/
jquery.meanmenu.js内にmean-container と記載があるのですがほぼ初めてjsに触れたので
内容がほとんどわからず困っております・・・。長文記載となり申し訳ございません
java
1 2// re-instate original nav (and call this on window.width functions) 3 var meanOriginal = function() { 4 jQuery('.mean-bar,.mean-push').remove(); 5 jQuery(meanContainer).removeClass("mean-container"); 6 jQuery(meanMenu).css('display', meanDisplay); 7 menuOn = false; 8 meanMenuExist = false; 9 jQuery(removeElements).removeClass('mean-remove'); 10 }; 11 12 // navigation reveal 13 var showMeanMenu = function() { 14 var meanStyles = "background:"+meanRevealColour+";color:"+meanRevealColour+";"+meanRevealPos; 15 if (currentWidth <= meanScreenWidth) { 16 jQuery(removeElements).addClass('mean-remove'); 17 meanMenuExist = true; 18 // add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.mean-container' 19 jQuery(meanContainer).addClass("mean-container"); 20 jQuery('.mean-container').prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+meanStyles+'">Show Navigation</a><nav class="mean-nav"></nav></div>'); 21
あなたの回答
tips
プレビュー