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

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

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

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

jQuery

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

CSS

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

Q&A

解決済

1回答

446閲覧

スライドメニューを表示したときページ全体にレイヤーをかけたい

.ryou

総合スコア21

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

jQuery

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

CSS

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

0グッド

0クリップ

投稿2020/09/04 01:53

前提・実現したいこと

jQueryでスライドメニューを作っています。
メニューが表示されたとき、それ以外の部分にレイヤーをかけたのですが、画面いっぱいしか表示されず、スクロールすると消えてしまいます。
どうしたらページ全体にレイヤーをかけられるか教えていただきたく、質問致しました。
エラーメッセージはありません。

該当のソースコード

HTML

1 <header> 2 <div class="container"> 3 <span class="menu-icon fa fa-bars menu-icon fa-fw"></span> 4 <span class="menu-icon fa fa-times fa-fw"></span> 5 </div> 6 </header> 7 8 <!--オーバーレイ--> 9 <div class="overlay"></div> 10 <!--スライドメニュー--> 11 <nav id="slide-menu"> 12 <h2>MENU</h2> 13 <ul> 14 <li><a href="#lesson">レッスン</a></li> 15 <li><a href="#" class="signup-show">新規登録</a></li> 16 <li><a href="#" class="login-show">ログイン</a></li> 17 </ul> 18 </nav>

CSS

1* { 2 box-sizing: border-box; 3} 4 5html, body { 6 height: 100%; 7} 8 9body { 10 margin: 0; 11 height: 100%; 12 font-family: "Hiragino Kaku Gothic ProN"; 13} 14 15/*オーバーレイ設定*/ 16.overlay { 17 content: ""; 18 display: block; 19 width: 0; 20 height: 100%; 21 background-color: rgba(0, 0, 0, 0.5); 22 position: absolute; 23 top: 0; 24 left: 0; 25 z-index: 2; 26 opacity: 0; 27 transition: opacity .5s, width 0s .5s, height 0s .5s; 28} 29 30.overlay.open { 31 width: 100%; 32 height: 100%; 33 opacity: 1; 34 transition: opacity .5s; 35} 36 37/*スライドメニュー*/ 38.slide-menu { 39 position: fixed; 40 top: 0; 41 right: 0; 42 bottom: 0; 43 left: 0; 44 background-color: rgba(0, 0, 0, 0.6); 45 z-index: 2; 46 display: none; 47} 48 49#slide-menu { 50 width: 80%; 51 max-width: 300px; 52 height: calc(100vh - 65px); 53 position: fixed; 54 top: 65px; 55 right: 0; 56 z-index: 3; 57 background-color: #fafafa; 58 59 60 display: block; 61 transform: translateX(100%); 62 transition: transform 1s; 63 64} 65 66#slide-menu.active{ 67 transform: translateX(0); 68 }

jQuery

1window.addEventListener('DOMContentLoaded', function(){ 2 3 $('.menu-icon').click(function(){ 4 $('#slide-menu').toggleClass('active'); 5 //メニューを表示 6 if($('#slide-menu').hasClass('active')) { 7 // ハンバーガーアイコンを管理する 8 $('.fa-bars').hide(); 9 $('.fa-times').show(); 10 //オーバーレイを管理する 11 $('.overlay').addClass('open'); 12 //メニューを非表示 13 }else { 14 // ハンバーガーアイコンを管理する 15 $('.fa-times').hide(); 16 $('.fa-bars').show(); 17 //オーバーレイを管理する 18 $('.overlay').removeClass('open'); 19 } 20 }); 21 22 //オーバーレイをクリックしてメニューを非表示 23 $('.overlay').click(function(){ 24 if($('#slide-menu').hasClass('active')) { 25 //メニューを非表示 26 $('#slide-menu').removeClass('active'); 27 //アイコンを変更 28 $('.fa-times').hide(); 29 $('.fa-bars').show(); 30 //オーバーレイを非表示 31 $('.overlay').removeClass('open'); 32 $('.open').css('transition-duration', '5s'); 33 } 34 }); 35});

試したこと

htmlとbodyをheight:100%;にして、オーバーレイもアクティブのとき100%にしましたが、できませんでした。
また、オーバーレイ自体のheightを500%など画面より大きい数字にしましたが、端末によってページのheightが変わってくるため、レイヤーが足りなかったり余ったりしてしまいました。

足りない情報等ございましたら、教えて頂ければ幸いです。
追記致します。
ご回答お待ちしております。

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

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

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

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

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

guest

回答1

0

ベストアンサー

overlayのpositionをfixedにしてみてはいかがでしょうか。

CSS

1 .overlay { 2 position: fixed; 3 left: 0; 4 top: 0; 5 width: 100vw; 6 height: 100vh; 7 opacity: 1; 8 transition: opacity .5s; 9}

投稿2020/09/04 02:19

sasa_

総合スコア140

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

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

.ryou

2020/09/04 02:22

ご回答ありがとうございます。 無事実装できました。 position:fixed;について詳しく調べてみようと思います! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問