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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

解決済

フルスクリーンメニューの背景色が切れてしまう

mupo
mupo

総合スコア33

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

1回答

0評価

0クリップ

182閲覧

投稿2022/01/18 09:42

前提・実現したいこと

cssでトグルナビを作り、クリックでフルスクリーンメニューが表示されるようにしました。
しかし、スクロールすると画面いっぱいに表示設定しているはずの背景色が途切れてしまいます。
スクロールしても背景色が途切れず、下の要素が見えないようにするにはどうしたらいいでしょうか?

該当のソースコード

HTML

<nav class="menu"> <div class="strokes"></div> <div class="strokes"></div> <div class="strokes"></div> </nav> <div class="fullscreenmenu"> <div class="list-box"> <ul> <li>タイトル</li> <li>テスト</li> </ul> <ul> <li>タイトル</li> <li>テスト</li> </ul> <ul> <li>タイトル</li> <li>テスト</li> </ul> </div> </div> <main> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </main> <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>

css

nav.menu{ position:absolute; width: 80px; height: 80px; top: 0; right: 0; margin: 0; cursor: pointer; background:#45454a; z-index: 9999; } nav.menu div.strokes { width: 40%; height: 4px; margin: 7px auto 7px auto; background: white; border-radius: 10px; transition: transform 0.3s, opacity 0.1s; } nav.menu div.strokes:first-child { margin-top: 28px; } .hide{ opacity: 0; transform: translateX(-42px); } .animate0{ transform: translateY(13px) rotate(45deg); } .animate2{ transform: translateY(-10px) rotate(-45deg); } .fullscreenmenu{ background-color: rgba(0, 93, 90, 0); top: 0; left: 0; width: 100%; height: 100vh; position: absolute; opacity: 0; -webkit-transition: background 0.5s ease-in-out, opacity 0.5s; -moz-transition: background 0.5s ease-in-out, opacity 0.5s; -ms-transition: background 0.5s ease-in-out, opacity 0.5s; -o-transition: background 0.5s ease-in-out, opacity 0.5s; transition: background 0.5s ease-in-out, opacity 0.5s; text-align: center; pointer-events: none; } .fullscreenmenu.show{ height: 100vh !important; opacity: 1; background-color: rgba(69,69,74, 1); -webkit-transition: background 0.5s ease-in-out, visibility 0.5s; -moz-transition: background 0.5s ease-in-out, visibility 0.5s; -ms-transition: background 0.5s ease-in-out, visibility 0.5s; -o-transition: background 0.5s ease-in-out, visibility 0.5s; transition: background 0.5s ease-in-out, visibility 0.5s; z-index: 9998; pointer-events: auto; overflow-y: scroll; } .list-box { display: flex; flex-direction: row; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; height: 100vh; } .list-box ul { height: 250px; padding: 0 20px; }

JavaScript

(function () { "use strict"; var fullscreenmenu = document.querySelector(".fullscreenmenu"); var strokes = document.querySelectorAll(".strokes"), icon = document.querySelector(".menu"), fullscreenmenu = document.querySelector(".fullscreenmenu"); function transformStart() { strokes[0].classList.toggle("animate0") strokes[1].classList.toggle("hide"); strokes[2].classList.toggle("animate2"); fullscreenmenu.classList.toggle("show"); } icon.addEventListener("click", transformStart); })();

試したこと

・100vhに!importantを設定(変化なし)
・z-indexの数値を変更(変化なし)

100vhにしているはずなのになぜ途切れてしまうのかがわかりません…

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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