Q&A
「ドロワーメニューオープンボタン」とはどれのことですか？
#js__sideMenuBtn はどこにありますか？
「閉じるボタン」とはどれのことですか？ #js__overlayですか？
JSを使ってのドロワーメニューを実装しております。
きちんと動くようになったのですが、
ドロワーメニューオープンボタンを押すとサイドメニューが出てきます。
するとその出てきたメニューで閉じるボタンが隠れてしまいます。
カンプにはその位置にあるので、ボタンの位置は動かしたくないです。
自分で解決のためにしたことは、
z-indexを利用し、レイヤーの順番を変えてみた
サイドメニューの中にボタンを入れてみた
などを行いました。
ですが、どちらも何も変わらず、ボタンが最上部に出てくることはありませんでした。
どうしてもその位置でボタンを設定したいので、もし何かできることがあれば教えていただきたいです。
JavaScript
1$(function () { 2 var $body = $('body'); 3 $('#js__sideMenuBtn').on('click', function () { 4 $body.toggleClass('side-open'); 5 $('#js__overlay').on('click', function () { 6 $body.removeClass('side-open'); 7 }); 8 }); 9});
html
1 2<body> 3 <div class="overlay" id="js__overlay"></div> 4 5 <nav class="side-menu"> 6 7 <div class="side-menu-img"> 8 <img src="/img//logo-d.png" alt=""> 9 </div> 10 <ul> 11 <li><a href="#">ABOUT US</a></li> 12 <li><a href="#">WORKS</a></li> 13 <li><a href="#">CULTURE</a></li> 14 <li><a href="#">TOPICS</a></li> 15 <li><a href="#">CONTACT</a></li> 16 </ul> 17 </nav> 18 19 <div class="wrapper"> 20 <main class="contents"> 21 <section class="top-wrapper"> 22 <div class="side-menu-btn" id="js__sideMenuBtn"> 23 <div class="side-menu-btn-icon"> 24 <span class="navbar_toggle_icon"></span> 25 <span class="navbar_toggle_icon"></span> 26 <span class="navbar_toggle_icon"></span> 27 </div> 28 <span class="navbar_toggle_text">MENU</span> 29 </div> 30 <div class="container top-text-logo"> 31 <div class="top-logo"> 32 <img src="/img/site-logo-1@2x.png" alt=""> 33 </div> 34 </div> 35 36 <p class="top-sub-head-top">デザインで人を笑顔にする会社</p> 37 <p class="top-sub-head-bottom">DIGSMILE INC.</p> 38 </section> 39 40 41 42 43 <section class="about-wrapper"> 44 <div class="about-contents-wrapper"> 45 <div class="container"> 46 <div class="about-contents"> 47 <div class="about-items"> 48 <p class="section-title about-title">ABOUT US</p> 49 <p class="about-text">DIGSMILEは、デザインで人を笑顔にする会社。<br> 50 なんでもない日常に少しのワクワクと遊び心を提供します。笑顔には世界を変える力がある、デザインには人を幸せにする力がある。毎日に幸せを感じて生きていきたい。<br> 51 <span class="dp-md">DIGSMILEの社名にはそんな想いが込められています。</span></p> 52 <a href="#" class="btn about-btn">READ MORE</a> 53 </div> 54 </div> 55 </div> 56 </div> 57 </section> 58 59 60 </main> 61 </div> 62 63 64</body> 65</html> 66 67 68 69 70
css
1 2 3//ドロワー 4.overlay { 5 content: ''; 6 visibility: hidden; 7 position: fixed; 8 top: 0; 9 left: 0; 10 display: block; 11 width: 100%; 12 height: 100%; 13 background: rgba(0,0,0,0); 14 -webkit-transition: all .5s ease; 15 transition: all .5s ease; 16 z-index: 3; 17 } 18 19 .side-open .overlay { 20 visibility: visible; 21 cursor: pointer; 22 background: rgba(0,0,0,0.4); 23 } 24 .side-open .overlay::after { 25 visibility: visible; 26 color: rgba(255,255,255,0.8); 27 } 28 29 //ドロワーサイドメニュー 30 .side-menu { 31 position: fixed; 32 top: 0; 33 right: -300px; 34 width: 300px; 35 height: 100%; 36 padding-top: 150px; 37 text-align: left; 38 font-size: 13px; 39 background-color: rgba($font-color,0.95); 40 z-index: 2; 41 @include mq('lg') { 42 padding-top: 175px; 43 width: 520px; 44 } 45 .side-menu-img { 46 @include mq('lg') { 47 padding-bottom: 30px; 48 } 49 img { 50 display: block; 51 margin: 0 auto; 52 } 53 } 54 ul { 55 li { 56 padding-bottom: 30px; 57 text-align: center; 58 @include mq('lg') { 59 padding-bottom: 34px; 60 } 61 a { 62 text-decoration: none; 63 color: #fff; 64 font-weight: 800; 65 font-size: 20px; 66 font-family: 'Montserrat', sans-serif; 67 letter-spacing: 1px; 68 69 70 } 71 } 72 } 73 } 74 75 76//ドロワー開閉ボタンアイコン 77 .side-menu-btn { 78 position: absolute; 79 top: 5px; 80 right: 25px; 81 padding: 20px; 82 cursor: pointer; 83 z-index: 999; 84 margin-left: auto; 85 @include mq('md') { 86 top: 19px; 87 right: 40px; 88 } 89 @include mq('lg') { 90 top: 15px; 91 right: 60px; 92 } 93 .side-menu-btn-icon { 94 display: inline; 95 position: absolute; 96 } 97 .navbar_toggle_text { 98 font-size: 8px; 99 font-weight: bold; 100 position: relative; 101 content: ""; 102 display: block; 103 top: 0px; 104 right: -30px; 105 106 107 } 108 .navbar_toggle_icon { 109 position: relative; 110 display: block; 111 height: 2px; 112 width: 23px; 113 background: #fff; 114 -webkit-transition: ease .5s; 115 transition: ease .5s; 116 &:nth-child(1) { 117 top: 0; 118 } 119 &:nth-child(2) { 120 margin: 3px 0; 121 } 122 &:nth-child(3) { 123 top: 0; 124 } 125 } 126 } 127 128 129 130//ドロワー内コンテンツ 131 .wrapper { 132 position: relative; 133 width: 100%; 134 height: 100%; 135 -webkit-transition: all .5s ease; 136 transition: all .5s ease; 137 z-index: 2; 138 } 139 140 .contents { 141 width: 100%; 142 background: #fff; 143 144 } 145 146 147 148//ドロワーメニューが開いた時 149 150 151 .side-open .side-menu { 152 -webkit-transition: all .5s ease; 153 transition: all .5s ease; 154 z-index: 3; 155 -webkit-transform: translate3d(-300px, 0, 0); 156 transform: translate3d(-300px, 0, 0); 157 } 158 159 .side-open .overlay { 160 -webkit-transform: translate3d(-300px, 0, 0); 161 transform: translate3d(-300px, 0, 0); 162 @include mq('lg') { 163 -webkit-transform: translate3d(-520px, 0, 0); 164 transform: translate3d(-520px, 0, 0); 165 } 166 } 167 168 169 170 171 .side-open .navbar_toggle_icon { 172 &:nth-child(1) { 173 top: 5px; 174 -webkit-transform: rotate(30deg); 175 transform: rotate(30deg); 176 } 177 &:nth-child(2) { 178 opacity: 0; 179 } 180 &:nth-child(3) { 181 top: -5px; 182 -webkit-transform: rotate(-30deg); 183 transform: rotate(-30deg); 184 } 185 } 186 187 188 189/／ドロワー以外のSASS 190 191 192 193$breakpoints: ( 194 "sm": "screen and (min-width: 576px)", 195 "md": "screen and (min-width: 768px)", 196 "lg": "screen and (min-width: 992px)", 197 "xl": "screen and (min-width: 1200px)" 198) !default; 199 200 201@mixin mq($breakpoint: md) { 202 @media #{map-get($breakpoints, $breakpoint)} { 203 @content; 204 } 205} 206 207 208 209 210 211.container { 212 width: 92%; 213 margin: 0 auto; 214 max-width: 980px; 215 @include mq("md") { 216 width: 89%; 217 218 } 219 @include mq('lg') { 220 width: 95%; 221 } 222} 223 224 225 226 227 228 229 230 231// index.html トップページ 232.top-wrapper { 233 background:linear-gradient(90deg,#fff 0%,#fff 24.5%,$bg-color 24.5%,$bg-color 100%); 234 color: #FFFFFF; 235 height: 668px; 236 position: relative; 237 z-index: 0; 238 margin-bottom: 78px; 239 @include mq('md') { 240 height: 1024px; 241 background:linear-gradient(90deg,#fff 0%,#fff 27%,$bg-color 27%,$bg-color 100%); 242 } 243 @include mq('lg') { 244 height: 740px; 245 background:linear-gradient(90deg,#fff 0%,#fff 46%,$bg-color 46%,$bg-color 100%); 246 } 247 &:before { 248 content: ""; 249 position: absolute; 250 background-image: url(../img/the-honest-company-uM-WXMr-3@2x.png); 251 width: 76.5%; 252 height: 87%; 253 object-fit: cover; 254 background-position: 54.5% 0%; 255 background-size: 450%; 256 background-repeat: no-repeat; 257 z-index: -2; 258 @include mq('md') { 259 height: 87%; 260 width: 78%; 261 background-position: 55% 0; 262 background-size: 330%; 263 } 264 @include mq('lg') { 265 background-size: 123%; 266 background-position: 80% 5%; 267 width: 76.5%; 268 height: 86.5%; 269 } 270 271 } 272 273 &:after{ 274 content: ""; 275 position: absolute; 276 background-color: rgba($color: #000000, $alpha: 0.35); 277 width: 76.5%; 278 height: 87%; 279 background-position: 55% 0%; 280 top: 0; 281 z-index: -2; 282 @include mq('md') { 283 width: 78%; 284 height: 87%; 285 background-position: 45% 44%; 286 287 } 288 @include mq('lg') { 289 width: 76.5%; 290 height: 86.5%; 291 background-position: 30% 45%; 292 } 293 } 294 295 .top-text-logo { 296 297 position: relative; 298 299 &:after { 300 content: "DESIGN FOR SMILE."; 301 display: block; 302 position: absolute; 303 top:234px; 304 right: -50px; 305 width: 300px; 306 color: #fff; 307 font-size: 56px; 308 font-family: 'Montserrat', sans-serif; 309 font-weight: bold; 310 letter-spacing: 3.3px; 311 line-height: 53px; 312 @include mq('md') { 313 top: 390px; 314 right: -17px; 315 } 316 @include mq('lg') { 317 font-size: 72px; 318 top: 225px; 319 right: 150px; 320 line-height: 82px; 321 letter-spacing: 0.9px; 322 } 323 } 324 @include mq('md') { 325 padding-top: 30px; 326 } 327 @include mq('lg') { 328 padding-top: 0px; 329 } 330 331 } 332 333 334 335 } 336 337 338 339
//ドロワー開閉ボタンアイコン
.side-menu-btn
をおすとドロワーが開くことになっております。
#js__sideMenuBtnを設置するのを忘れておりましたが、何故かきちんと開いてしまいます。やはり#js__sideMenuBtnを利用すべきですよね？
閉じるボタンは、三menuがドロワーを開くと×menuになり、同じ場所に閉じるボタンがあるという状態です。
存在は見えるのですが、ドロワーサイドメニューにかぶってしまい、おすことができませんでした。
階層や書き方をかえてもどうにもならず何かお力を貸していただければと思います。
ご提示のコードを試してみましたが、当方の環境では 三menu というものが表示されませんでしたので、問題が再現しません。
三menu とはこのソースで言うと、どの部分ですか？
また、
> .side-menu-btn
> をおすとドロワーが開くことになっております。
とのことですが、それはどこにありますか？
---
ご理解いただきたいのですが、問題が再現できるコードがないと問題の解決をすることは難しいです。
申し訳ございません。
コードに漏れがございました。
menuやjsMenuBtnがきちんと載っているコードを編集した際に載せております。ご確認いただければと思います。よろしくお願いいたします。
回答1件
0
ベストアンサー
以下のようにしてみてはいかがですか？
CSS
1.wrapper { 2 /* position: relative; ←削除 */ 3 width: 100%; 4 height: 100%; 5 -webkit-transition: all 0.5s ease; 6 transition: all 0.5s ease; 7 z-index: 2; 8}
コメントを受けて追記
以下のように変更してみてはいかがでしょうか。
scss
1 2 //ドロワーサイドメニュー 3 .side-menu { 4 position: fixed; 5 top: 0; 6 right: -300px; 7 width: 300px; 8 height: 100%; 9 padding-top: 150px; 10 text-align: left; 11 font-size: 13px; 12 background-color: rgba($font-color,0.95); 13 z-index: 2; 14 z-index: -1; // 追加 15 16// ... 17 18//ドロワー内コンテンツ 19 .wrapper { 20 position: relative; 21 width: 100%; 22 height: 100%; 23 -webkit-transition: all .5s ease; 24 transition: all .5s ease; 25 // z-index: 2; 削除 26 } 27 28 .contents { 29 width: 100%; 30 background: #fff; 31 32 } 33 34// ... 35 36// index.html トップページ 37.top-wrapper { 38 background:linear-gradient(90deg,#fff 0%,#fff 24.5%,$bg-color 24.5%,$bg-color 100%); 39 color: #FFFFFF; 40 height: 668px; 41 position: relative; 42 // z-index: 0; 削除 43 margin-bottom: 78px; 44 @include mq('md') { 45 height: 1024px; 46 background:linear-gradient(90deg,#fff 0%,#fff 27%,$bg-color 27%,$bg-color 100%); 47 } 48 @include mq('lg') { 49 height: 740px; 50 background:linear-gradient(90deg,#fff 0%,#fff 46%,$bg-color 46%,$bg-color 100%); 51 } 52 53 // 追加 54 .top-text-logo, 55 .top-sub-head-top, 56 .top-sub-head-bottom 57 { 58 position: relative; 59 z-index: 1; 60 } 61 // 追加ここまで 62 63 &:before { 64 content: ""; 65 position: absolute; 66 background-image: url(http://placehold.jp/24/cc9999/993333/150x100.png?text=the-honest-company-uM-WXMr-3@2x.png); 67 width: 76.5%; 68 height: 87%; 69 object-fit: cover; 70 background-position: 54.5% 0%; 71 background-size: 450%; 72 background-repeat: no-repeat; 73 // z-index: -2; 削除 74 @include mq('md') { 75 height: 87%; 76 width: 78%; 77 background-position: 55% 0; 78 background-size: 330%; 79 } 80 @include mq('lg') { 81 background-size: 123%; 82 background-position: 80% 5%; 83 width: 76.5%; 84 height: 86.5%; 85 } 86 87 } 88 89 &:after{ 90 content: ""; 91 position: absolute; 92 background-color: rgba($color: #000000, $alpha: 0.35); 93 width: 76.5%; 94 height: 87%; 95 background-position: 55% 0%; 96 top: 0; 97 // z-index: -2; 削除 98 @include mq('md') { 99 width: 78%; 100 height: 87%; 101 background-position: 45% 44%; 102 103 } 104 @include mq('lg') { 105 width: 76.5%; 106 height: 86.5%; 107 background-position: 30% 45%; 108 } 109 }
z-indexは意外とややこしい仕様なので、あまり多用すると自分の首を絞めかねないです。
投稿2020/08/25 07:57
編集2020/08/26 03:41総合スコア36912
ご回答ありがとうございます。
試してみたのですが、結局三menuは浮き上がりませんでした。
またposition relativeを消すことで、横に隠pcサイズにした際れていたサイドメニューが出てきてしまいました。。。。。。。
当方では問題なく動作しましたので、ご提示いただいていない部分のコードの影響かもしれませんね。
特に、Sassでなにかのモジュールを使っているようですから、その影響が大きいのかもしれません。
SASSでは@includeのみ使用しております。その影響でしょうか？
他の部分も載せれるだけコードを新しく更新して載せさせていただきました。文字数の都合上フォントCSSなどは削除したので不細工なコードですが。。。
心当たりとしては、背景の色の上に擬似要素で背景画像を重ねていることが悪いのでは？と思ったりもしたのですが、そちらは問題ではないでしょうか？
> 心当たりとしては、背景の色の上に擬似要素で背景画像を重ねていることが悪いのでは？
まあ、そうですね。変えていいのですか？
ありがとうございます。やり方は擬似要素ではなくてもいいのですが、背景色(白と黒の2色)と画像の配置のデザインは変えられないです。
自宅に戻りましたら夜あたりに確認させていただきます。
お返事が遅くなり大変申し訳ありません。
無事にこちらで思うような実装を行うことができました。長い間ありがとうございました。
あなたの回答
tips
プレビュー
