Q&A
「PC画面時にはドロワーを隠す」というのは、.drawerを一生表示しないという意味ですか？
PCかどうかはどうやって判定するつもりですか？
前提・実現したいこと
ドロワーメニューが、ページの読み込み時に一瞬表示されてしまうのを防ぎたいです。
発生している問題
ページの外に隠しているドロワーメニューがページ読み込み時に一瞬表示されてしまいます。
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});
回答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
総合スコア2
あなたの回答
tips
プレビュー
