Q&A
問題の再現する CSS を書いてください。
前提・実現したいこと
グローバルメニューの作成でハマッていましたが、
以下の方法で一旦応急的に解決しています。
やりたいことは、
グローバルメニューを開いた位置で背景が固定され、グローバルメニューを閉じてもそのままの位置をキープする
というグローバルメニューです。
発生している問題・コード
先ほど、問題となっているコード等を書きましたが、一旦下記方法にて応急的に問題なく動いています。
touch closeエリアとメニューボタンを押しても背景を固定することができました。
ただ、処置としては右上のバーガーメニューの上に透明の別の要素を被せてそこをクリックするという方法になります。
以下、コードになります。
<script> $(function(){ $('#gnavi .menu').hide(); $('#gnavi .btn').click(function(){ $('#gnavi').toggleClass('active'); $('#gnavi .menu, #gnavi .closer').fadeToggle(); posi = $(window).scrollTop(); $('body').css({ position: 'fixed', top: -1 * posi }); }); $('#gnavi .closer, #gnavi .close-btn').click(function(){ $('#gnavi').toggleClass('active'); $('body').attr('style', ''); $('html, body').prop({scrollTop: posi}); $('#gnavi .menu, #gnavi .closer').fadeToggle(); }); }); </script> <style> /* -- Global Navigation -- */ #gnavi { position: relative; z-index: 50; } /* botton-position */ #gnavi .area { position: fixed; top: 24px; right: 8px; z-index: 30; } /* botton-design */ #gnavi .btn, #gnavi .close-btn { display: none; position: relative; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #f0f0f0; background: rgba(255,255,255,.8); cursor: pointer; z-index: 40; } #gnavi .close-btn { position: absolute; top: 0; left: 0; height: 72px; border-radius: 0; border: 0; background: none; } @media (max-width: 800px) { #gnavi .btn { display: block; } } #gnavi .bar { position: relative; width: 32px; margin: 15px auto; } #gnavi .bar span { display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #333333; -webkit-transition: .35s ease-in-out; -o-transition: .35s ease-in-out; transition: .35s ease-in-out; } #gnavi .bar span:nth-child(1) { top: 0; } #gnavi .bar span:nth-child(2) { top: 10px; } #gnavi .bar span:nth-child(3) { top: 20px; } #gnavi small { position: absolute; bottom: -20px; right: 0; width: 56px; font-size: 12px; } /* botton-animation */ #gnavi.active .close-btn { display: block; } #gnavi.active .bar span:nth-child(1) { top: 11px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #gnavi.active .bar span:nth-child(2) { width: 0; left: 50%; } #gnavi.active .bar span:nth-child(3) { top: 11px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* gnavi-closer */ #gnavi .closer { display: none; position: fixed; bottom:0; left: 0; width: 100%; height: 15%; cursor: pointer; background: rgba(0,0,0,.8); color: #fff; z-index: 20; } #gnavi .closer span { display: inline-block; padding-left: 24px; background: url(../img/com-gnavi-btn-close.png) no-repeat; background-position: left top 2px; background-size: 22px; font-size: 18px; } /* gnavi-menu-area */ #gnavi .menu { display: none; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 10; overflow-y: scroll; -webkit-overflow-scrolling: touch; background:url(../img/img-common-bg-gnavi.jpg) repeat; background: #ccc; } /* gnavi-menu-inner */ #gnavi .inn { max-width: 560px; margin: auto; padding: 0 24px 24px; } /* gnavi-item */ #gnavi .item { } /* gnavi-link */ #gnavi .link { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } </style> <!-- HTML --> <div id="gnavi"> <div class="area"> <div class="closer"><span>touch close</span></div> <!-- 開閉ボタン --> <div class="btn"> <small>メニュー</small> <div class="bar"> <span></span> <span></span> <span></span> </div> <!-- /.btn-bar --> </div> <!-- /.btn --> <div class="close-btn"></div> <nav> <div class="menu"> <ul class="inn"> <li class="item"><div>リンク</div><a class="link" href="#"></a></li> <li class="item"></li> <li class="item"></li> </ul> </div> <!-- /.menu --> </nav> </div> <!-- /.gnavi__area --> </div> <!-- /#gnavi --> <!-- ------------------------------------------ << / GLOBAL NAVI >> ------------------------------------------ --> </div> <!-- /.mvisual_header --> </div> <!-- /.mvisual_inn --> </div> <!-- /.mvisual__area --> </div> <!-- /#header --> </header>
一応上記で動いていますが、もう少しスマートなやり方はないでしょうか？
ボタンの上に別の要素を被せるのではなく、JQueryでなんとかできればと思います。
よろしくお願い致します。
回答1件
0
ベストアンサー
ボタンを複数置くと煩雑になるので一つでできるようにしたほうがいいでしょう。
スクロールバーによる位置ずれはスクリプトで補正します。
jQuery
1 $('#gnavi .btn').on('click', function() { 2 if ($('#gnavi').hasClass('active')) { 3 $('#gnavi').toggleClass('active'); 4 $('#gnavi .menu, #gnavi .closer').fadeToggle(); 5 $('body').removeAttr('data-menu'); 6 $('#gnavi .area').css('padding-right', '0'); 7 } else { 8 $('#gnavi').toggleClass('active'); 9 $('#gnavi .menu, #gnavi .closer').fadeToggle(); 10 var cw = document.body.clientWidth; 11 $('body').attr('data-menu', 'menu'); // overflow: hidden; 12 $('#gnavi .area').css('padding-right', document.body.clientWidth - cw); 13 } 14 }); 15 16 $('#gnavi .closer').on('click', function() { 17 $('#gnavi .btn').trigger('click'); 18 });
参考：スクロールバーの幅を考慮したモーダル処理
http://bashalog.c-brains.jp/17/04/10-163000.php
投稿2019/12/05 05:22
総合スコア13749
x_x 様
ご回答ありがとうございます！
大変勉強になります。
ご回答いただいた中で1点、「ボタンは1つに」という点ですが、
・メインのボタン #gnavi .btn
・ナビの中に配置した閉じるためのボタン #gnavi .closer
これがあると出来ないという意味になりますでしょうか？
利便性を考えると2つある方が良いと言われているので・・・どうしたものか・・・
ただ、スクロールバーの考慮など本当にありがとうございます！！
すごく勉強になります。
またよろしくお願いします。
.close-btn が不要という意味です。
x_x 様
ご回答ありがとうございます！すごいです！だんだん理解できそうなとこまで来ているのですが・・・
もう少し教えてもらえますか？
2つ分からない部分があります。
1.独自データ属性data-menuをフック？に使ってmenu属性を与え、スクロールバーを消す＝overflow:hiddenにしている。
という理解で良いのでしょうか？
2..close-btnを消して、これをこのまま実行してもまだスクロールバーは出たままですが、CSSかスクリプトで何かを足してあげなければいけないのでしょうか？
1. その通りです。class などでもいいでしょう。
2. #gnavi .menu に overflow-y: scroll; があるのでそのスクロールバーでは？
ありがとうございます！なるほどです！！
ただ、2.のoverflow-yを消してもまだスクロールバーが出たままなので、menu属性のほうも含め、明日もう少し検証させてください！
お忙しいところインターラプトしてもらってすみません。
ありがとうございます！！
x_x 様
お世話になります！
昨日はありがとうございました！！
今日は、まだできていないのですがいくつか仕事がバタバタと入ってしまい、
検証できず仕舞いなのですが、忘れないようベストアンサーにさせていただきました！！
また検証してみますので、もし、もし分からなかったらまた教えてください。
取り急ぎですが、本当にありがとうございました！！
x_x 様
お世話になります。
先日はありがとうございました。
少しバタついてしまい検証が遅れてしまいました。
ご教示いただきましたコードのdata-menuの箇所に直接css('overflow','hidden')を与えることで理想とする動きができました。
独自データの使い方が分かってないので何とも不勉強が悩ましいところですが、すごく助かりました！
またボタン位置が動かないようにするなどの配慮もしていただいていたようで、実行してみて多くの気づきがありました。
取り急ぎで恐縮ですが、本当にありがとうございました！
またよろしくお願い致します！！
あなたの回答
tips
プレビュー
