質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

15939閲覧

ドロワーメニューが一番下までスクロールできない

jks

総合スコア14

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/09/09 04:12

質問失礼します。
現在絵練習でスマホ用のドロワーメニューを制作しております。

右上のMENUを押下した時にドロワーメニューが開く動きまではできているのですが、
ドロワーメニューのul、liのulを開きliを展開した時、大本のulのliのメニューが一番下まで表示されず
スクロールが途中で止まってしまいます。
下のコードのメニューで言うとContactまでスクロールが行きません。

スクロールが止まる原因がお分かりになる方がいらっしゃいましたらご教授いただきたいです。

よろしくお願いいたします。
コードは以下になります。

【HTML】

<body> <!-- サイドオープン時メインコンテンツを覆う --> <div class="overlay" id="js__overlay"></div> <!-- サイドメニュー --> <div class="side-menu" > <ul> <li><a href="#">HOME</a></li> <li class="menubtn1"><p>メニュー1</p> <ul class="submenu1"> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> </ul> </li> <li class="menubtn2"><p>開発機器メニュー2</p> <ul class="submenu2"> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> </ul> </li> <li class="menubtn3"><p>メニュー3</p> <ul class="submenu3"> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">飲食システム</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> <li><a class="innermenubtn" href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- 開閉用ボタン --> <div class="side-menu-btn" id="js__sideMenuBtn"><div class="btn_text">MENU</div></div> <!-- メインコンテンツ --> <div class="wrapper"> <header class="header"> <div id="header_logo"><a href="logo.png"></a></div> </header> <main class="contents"> <div id="HA"> <img src="header-sp.jpg"> </div> </main> <footer class="footer"> <p>フッター</p> </footer> </div><!-- wrapper --> </body>

【css】

/* ヘッダー */ .header { position: fixed; width: 100%; padding: 28px 0 34px; background: #fff; border-bottom: solid 4px #008de5; } #header_logo img { width: 380px; height: auto; } /* ヘッダーメニュー */ /* サイドオープン時にメインコンテンツを覆う部分 */ .overlay { visibility: hidden; position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 3; } .side-open .overlay { visibility: visible; cursor: pointer; background: rgba(0,0,0,.7); } /* サイドメニュー */ .side-menu { position: fixed; top: 0; right: 0; width: 600px; height: 100%; padding-top: 150px; text-align: center; font-size: 26px; background: #008de5; z-index: 1; visibility: hidden; overflow-y: scroll; } /* 開閉用ボタン */ .side-menu-btn { position: fixed; top: 20px; right: 20px; width: 124px; height: 36px; padding: 20px 0; text-align: center; background: #464646; border: solid 2px #000; border-radius: 10px; cursor: pointer; z-index: 4; } .btn_text { font-size: 30px; color: #fff; } /* サイドメニューオープン */ .side-open .wrapper, .side-open .overlay { -webkit-transform: translate3d(-600px, 0, 0); transform: translate3d(-600px, 0, 0); } .side-open .side-menu { visibility: visible; } /* ナビメニュー */ .side-menu li a, .menubtn1 p, .menubtn2 p, .menubtn3 p, .submenu1 a, .submenu2 a, .submenu3 a { display: block; font-size: 40px; padding: 26px 0; color: #fff; border-bottom: solid 2px #002254; } .side-menu li a:visited, a .innermenubtn:visited { color: #fff; } .submenu1, .submenu2, .submenu3 { display: none; } .submenu1 a, .submenu2 a, .submenu3 a { background: #41b6f0; } /* メインコンテンツ */ .wrapper { position: relative; width: 100%; height: 100%; text-align: center; font-size: 24px; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; } .contents { width: 100%; height: 2000px; padding: 124px 0 0; }

【js】

$(function(){ $('#js__sideMenuBtn').click(function () { $('body').toggleClass('side-open'); var txt = $('.btn_text').text() == 'CLOSE' ? 'MENU' : 'CLOSE'; $('.btn_text').text(txt); }); $('.menubtn1').on('click', function(){ $('.submenu1').slideToggle(400); }); $('.menubtn2').on('click', function(){ $('.submenu2').slideToggle(400); }); $('.menubtn3').on('click', function(){ $('.submenu3').slideToggle(400); }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

css

1.side-menu { 2 position: fixed; 3 top: 0; 4 right: 0; 5 width: 600px; 6 height: 100%; /* ココ */ 7 padding-top: 150px; /* ココ */ 8 text-align: center; 9 font-size: 26px; 10 background: #008de5; 11 z-index: 1; 12 visibility: hidden; 13 overflow-y: scroll; 14}

height100%で、padding-top150pxなので、表示外に150pxはみ出してしまっています。
実際の要素の大きさはheight + padding-topになっているからです。

一番簡単な修正方法は
height: calc(100% - 150px);
とすることですかね。

投稿2018/09/09 04:28

spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jks

2018/09/09 05:30

ご回答ありがとうございます。 height:calcというものがあったなんてまったく知りませんでした。 分かりやすい解説といい本当に勉強になりました! 重ねてお礼申し上げます。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問