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

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

新規登録して質問してみよう
ただいま回答率
85.50%
メニュー

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

解決済

1回答

7597閲覧

ページの読み込み時に一瞬表示されてしまう(ドロワーメニュー)

otakedesu

総合スコア2

メニュー

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2021/05/23 02:25

編集2021/05/23 04:40

前提・実現したいこと

ドロワーメニューが、ページの読み込み時に一瞬表示されてしまうのを防ぎたいです。

発生している問題

ページの外に隠しているドロワーメニューがページ読み込み時に一瞬表示されてしまいます。
display:none;とfadeInで実装はできるのですが、PC画面時にもドロワーが表示されてしまいます。
PC画面時にはドロワーを隠す方法が知りたいです。

試したこと

css

1.drawer { 2 display: none; 3}

Javascript

1$(function () { 2 $('.drawer').fadeIn(0); 3});

補足情報

.drawerの実装方法は、ハンバーガーメニューがクリックされたときにJavascriptでクラスを追加して、transformで見える位置にずらしています。

・display:none;とfadeInを使いでPC画面の際はドロワーメニューを消す方法
・もしできなければ他のやりかたで表示くずれを防ぐ方法

こちら2点の実装方法をご教授願います。

追加情報(該当のコード)

HTML

1<header class="header"> 2<!-- hamburger --> 3<button 4 type="button" 5 id="js-hamburger" 6 class="header__hamburfer hamburger" 7 aria-expanded="false" 8> 9 <span class="hamburger__line"> </span> 10</button> 11<!-- drawer-background --> 12<div 13 class="header__drawer-back drawer-background" 14 id="js-drawer-background" 15></div> 16<!-- sp-menu --> 17<div class="header__drawer drawer"> 18 <div class="drawer__logo-box"> 19 <a href="front-page.html" class="drawer__logo-link"> 20 <img 21 src="/assets/images/common/logo.png" 22 alt="ロゴの写真" 23 class="drawer__logo" 24 /> 25 </a> 26 </div> 27 <nav class="drawer__nav sp-menu" id="js-global-menu"> 28 <ul class="sp-menu__list"> 29 <li class="sp-menu__item"> 30 <a href="front-page.html" class="sp-menu__link">ホーム</a> 31 </li> 32 <li class="sp-menu__item"> 33 <a href="archive-news.html" class="sp-menu__link">お知らせ</a> 34 </li> 35 <li class="sp-menu__item"> 36 <a href="home.html" class="sp-menu__link">ブログ</a> 37 </li> 38 <li class="sp-menu__item"> 39 <a href="page-price.html" class="sp-menu__link">コース・料金</a> 40 </li> 41 </ul> 42 </nav> 43 <div class="drawer__button-area"> 44 <div class="drawer__button-box"> 45 <a href="#" class="drawer__button drawer__button--orange">資料請求</a> 46 </div> 47 <div class="drawer__button-box"> 48 <a href="#" class="drawer__button drawer__button--blue">お問い合わせ</a> 49 </div> 50 </div> 51</div> 52</header>

SCSS

1// ハンバーガー 2.hamburger { 3 position: fixed; 4 top: 16px; 5 right: 25px; 6 z-index: 50; 7 width: 48px; 8 height: 48px; 9 border-radius: 50%; 10 border: 1px solid black; 11 box-shadow: 0 0 rem(15) transparent; 12 outline: none; 13 transition: all 0.3s ease-in-out; 14 -webkit-transition: all 0.3s ease-in-out; 15 display: none; 16} 17@media screen and (max-width: 1,000px) { 18 .hamburger { 19 display: block; 20 } 21} 22 23 24 25// ハンバーガーの線 26.hamburger__line { 27 position: absolute; 28 top: 0; 29 right: 0; 30 bottom: 0; 31 left: 0; 32 margin: auto; 33 width: 18px; 34 height: 2px; 35 background: black; 36 transition: inherit; 37 -webkit-transition: inherit; 38 &::before, 39 &::after { 40 position: absolute; 41 display: block; 42 width: 100%; 43 height: 100%; 44 background-color: inherit; 45 content: ""; 46 transition: inherit; 47 -webkit-transition: inherit; 48 } 49 &::before { 50 top: -5px; 51 } 52 &::after { 53 top: 5px; 54 } 55} 56 57 58 59// ドロワー時背景マスク 60.drawer-background { 61 position: fixed; 62 z-index: $layer-floating; 63 width: 100vw; 64 top: 0; 65 right: 0; 66 bottom: 0; 67 overflow: hidden; 68 height: 100vh; 69 background: black; 70 color: white; 71 visibility: hidden; 72 opacity: 0; 73 display: none; 74} 75@media screen and (max-width: 1,000px) { 76 .drawer-background { 77 display: block; 78 } 79} 80 81 82 83// spメニュー 84.drawer { 85 position: fixed; 86 z-index: $layer-drawer; 87 width: 280px; 88 top: 0; 89 right: 0; 90 bottom: 0; 91 overflow: hidden; 92 height: 100vh; 93 background-color: white; 94 transform: translateX(280px); 95 transition: 0.3s; 96 display: none; 97} 98@media screen and (max-width: 1,000px) { 99 .drawer { 100 display: block; 101 } 102} 103 104 105 106// aria-expandedがtrueになったら 107.hamburger[aria-expanded="true"] .hamburger__line { 108 background-color: transparent; 109 &::before, 110 &::after { 111 top: 0; 112 background-color: black; 113 } 114} 115.hamburger[aria-expanded="true"] .hamburger__line::before { 116 transform: rotate(45deg); 117 -webkit-transform: rotate(45deg); 118 -ms-transform: rotate(45deg); 119} 120.hamburger[aria-expanded="true"] .hamburger__line::after { 121 transform: rotate(-45deg); 122 -webkit-transform: rotate(-45deg); 123 -ms-transform: rotate(-45deg); 124} 125 126 127 128// jsでクラス追加 129.is-drawerActive { 130 // 背景固定 131 height: 100%; 132 overflow: hidden; 133 134 .drawer { 135 transform: translateX(0px); 136 transition: 0.3s; 137 } 138 .drawer-background { 139 visibility: visible; 140 opacity: 0.8; 141 transition: 0.3s; 142 } 143}

JavaScript

1$(function () { 2 $('#js-hamburger').click(function () { 3 $('body').toggleClass('is-drawerActive'); 4 5 if ($(this).attr('aria-expanded') == 'false') { 6 $(this).attr('aria-expanded', 'true'); 7 $('#js-global-menu').attr('area-hidden', 'false'); 8 } else { 9 $(this).attr('aria-expanded', 'false'); 10 $('#js-global-menu').attr('area-hidden', 'true'); 11 } 12 }); 13 14 $('#js-drawer-background').click(function () { 15 $('body').removeClass('is-drawerActive'); 16 $('#js-hamburger').attr('aria-expanded', 'false'); 17 $('#js-global-menu').attr('area-hidden', 'true'); 18 }); 19});

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

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

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

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

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

itagagaki

2021/05/23 02:32

「PC画面時にはドロワーを隠す」というのは、.drawerを一生表示しないという意味ですか? PCかどうかはどうやって判定するつもりですか?
otakedesu

2021/05/23 02:58

申し訳ございません。PC画面ではなく、PC幅です。 横幅1,000px以上の時は.drawerが表示されないようにしたいです。
m.ts10806

2021/05/23 04:18

コピペで再現できるコードが提示されないと何とも言えません。
otakedesu

2021/05/23 04:41

申し訳ございません。 実際のコードを掲載させていただきました。
itagagaki

2021/05/23 07:49

再現できないですね。 というか初期状態で display: none; のためか何も表示されなくて、何もできないのですが…。
guest

回答1

0

自己解決

scss

1//こちらを削除 2.drawer { 3 transform: translateX(280px); 4} 5.is-drawerActive { 6 .drawer { 7 transform: translateX(0px); 8} 9 10//こちらに訂正 11.drawer { 12 right: 280px; 13} 14.is-drawerActive { 15 .drawer { 16  right: 0; 17} 18 19

これでページの読み込み時表示されないように実装できました。

投稿2021/05/23 13:53

otakedesu

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問