Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
素人でも申し訳ありませんが、質問させてください。
トグルでスマホ用のアコーディオンメニューを作成したのですが、
アコーディオンのメニューが長いため、開くとメニューが切れて表示されます。
メニューをスクロールさせたいのですが方法がわかりません。
メニューを開くとき、バックのhtmlはロックできたのですが…。
長々と申し訳ありませんが、どなたかご教授ください。
###該当のソースコード
html <nav> <div class="acco acco01 switch"> <ul> <li> <a href="/" class="menu_none">menu1</a> </li> <li> <a class="toggle menu">menu2</a> <ul class="inner child child01"> <li><a href="">sbumenu01</a></li> <li><a href="">sbumenu02</a></li> <li><a href="">sbumenu03</a></li> <li><a href="">sbumenu04</a></li> <li><a href="">sbumenu05</a></li> <li><a href="">sbumenu06</a></li> </ul> </li> <li> <a class="toggle menu">menu3</a> <ul class="inner child child01"> <li><a href="">sbumenu01</a></li> <li><a href="">sbumenu02</a></li> <li><a href="">sbumenu03</a></li> <li><a href="">sbumenu04</a></li> <li><a href="">sbumenu05</a></li> <li><a href="">sbumenu06</a></li> <li><a href="">sbumenu07</a></li> <li><a href="">sbumenu08</a></li> <li><a href="">sbumenu09</a></li> <li><a href="">sbumenu09</a></li> </ul> </li> </ul> </div> </nav> <script type="text/javascript"> $(function() { $("#hamburger").click(function() { $("#hamburger").hide(); $("nav").css("right","0px").css("top","0px"); $("#close").css("right","0").css("top","14px") $("#overlay").fadeIn(); $('body,html').addClass("fixed01"); return false; }); $("#close").click(function() { $("#hamburger").show(); $(this).removeAttr("style"); $("nav").removeAttr("style"); $("#overlay").removeAttr("style"); $('nav').css({"content":"none"}); $('body,html').removeClass("fixed01"); }); $("#overlay").click(function() { $("#hamburger").show(); $(this).removeAttr("style"); $("nav").removeAttr("style"); $("#close").removeAttr("style"); $('body,html').removeClass("fixed01"); }); }); $(function() { function accordion() { $(this).toggleClass("active").next().slideToggle(300); } $("nav .toggle").click(accordion); }); </script> <style> #hamburger { display:block; position: fixed; top: 14px; right: 10px; z-index: 4; } #close { display: block; position: fixed; width: 36px; height: 48px; top: -50px; right:0; z-index: 5; } #overlay { display: none; width: 100%; height:100%; text-align: center; position: fixed; top: 0; z-index: 1; background: rgba(0,0,0,0.3); } .fixed01 { overflow:hidden; height: 100%; position: fixed; } .menu { display: block; position: relative; padding: 10px; font-size: 13px; } nav { width: 100%; display:block; position: fixed; z-index: 2; border-top: none; padding: 47px 0 0; margin: 0; top: -1000px; right: 0; transition-duration: 0.5s; } .acco { margin: 0; } .acco a { display: block; font-size:13px; } .acco .child { display: none; margin: 0 0 -1px; padding: 0; background: #fff; border: 1px solid #eaeaea; } .acco .child a { font-weight: normal; } .acco .child .menu { background: #eaeaea; color: #5e5e5e; } .acco .child .menu:hover { background: #d0d0d0; } .acco .child > li { margin: 4px 0; padding: 3px 16px; border-bottom: 1px dotted #dddddd; } .acco .child > li:last-child { border-bottom: 0; } .switch .menu:after { position: absolute; top: 50%; right: 10px; margin-top: -0.7em; content: '▸'; font-size: 1.4em; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transition: all, 0.25s, linear; -o-transition: all, 0.25s, linear; -webkit-transition: all, 0.25s, linear; transition: all, 0.25s, linear; } .switch .menu.active:after { -moz-transform: translate(0, 50%); -ms-transform: translate(0, 50%); -webkit-transform: translate(0, 50%); transform: translate(0, 50%); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .child01 { border: 1px solid #eaeaea; } .acco01 .menu { background: #006599; color: #fff; border-bottom:#005985 solid 1px; } .acco01 .menu:hover { background: #0079b8; text-decoration: none; } .acco .menu_none { background: #006599; color: #fff; padding: 10px; border-bottom:#005985 solid 1px; } .acco .menu_none:hover { background: #0079b8; text-decoration: none; } </style>
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
ご指摘ありがとうございます。コードを選択して「<code>」ボタンを押しました。
回答2件
0
ベストアンサー
提示されたHTML/CSSではそもそも必要な要素が足りていないので、正確な数値ではありませんが考え方としては下記のようにすればいけます。
CSS
1nav { 2 height: 90vh; /* 環境にあわせる */ 3 overflow-x: scroll; 4} 5```**動くサンプル：**[https://jsfiddle.net/feqm9vwk/](https://jsfiddle.net/feqm9vwk/)
投稿2017/05/02 14:39
総合スコア69400
ご回答ありがとうございます。
すみません、只今PCを触れる環境にいないため、
GW明けにチャレンジしてみたいと思います。
申し訳ありませんが、どうぞよろしくお願いいたします。
先ほど実装してみたところ、
メニューがスクロールすることができました。
ありがとうございます！！
ずっとJSの書き方が問題なのかと思っていたので、目からうろこ状態です。
ただJSの#overlayと、メニューの後ろの.fixedが同時に実装できないくなりました。
.fixedについてはメニューがスクロール出来るようになったので、いらないかと思っています。
もう少し試してみます。
返信が遅れてしまい、申し訳ありませんでした。
取り急ぎお礼申し上げます。
0
スマホのスクロール処理はなかなかうまくいかないですよね 汗
手前みその記事で申し訳ないですが、
ご参考にしてみてください。
http://highmoon-miyabi.main.jp/blog/2016/05/31_000424.html
あるブロックをスワイプした時に、
bodyのスクロールはさせずに、
ブロックの中身を擬似的にスクロールをさせる、
という方法の記事です。
投稿2017/05/02 09:48
総合スコア9528
ご回答ありがとうございます。
すみません、只今PCを触れる環境にいないため、
GW明けにチャレンジしてみたいと思います。
申し訳ありませんが、どうぞよろしくお願いいたします。
ご指示ありがとうございます。
ＪＳについては本当に初心者中の初心者で、なかなか理解できず…。
実装することができませんでした。
もうしばらく勉強が必要なようです。
また何かありましたら、何卒よろしくお願い致します。
あなたの回答
tips
プレビュー
