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

Lhankor_Mhy

2020/08/25 07:03 編集

「ドロワーメニューオープンボタン」とはどれのことですか？ #js__sideMenuBtn はどこにありますか？「閉じるボタン」とはどれのことですか？ #js__overlayですか？

MIYABITSUJIMOTO

2020/08/25 07:19

//ドロワー開閉ボタンアイコン .side-menu-btn をおすとドロワーが開くことになっております。 #js__sideMenuBtnを設置するのを忘れておりましたが、何故かきちんと開いてしまいます。やはり#js__sideMenuBtnを利用すべきですよね？閉じるボタンは、三menuがドロワーを開くと×menuになり、同じ場所に閉じるボタンがあるという状態です。存在は見えるのですが、ドロワーサイドメニューにかぶってしまい、おすことができませんでした。階層や書き方をかえてもどうにもならず何かお力を貸していただければと思います。

Lhankor_Mhy

2020/08/25 07:22

ご提示のコードを試してみましたが、当方の環境では三menu というものが表示されませんでしたので、問題が再現しません。三menu とはこのソースで言うと、どの部分ですか？

Lhankor_Mhy

2020/08/25 07:26

また、 > .side-menu-btn > をおすとドロワーが開くことになっております。とのことですが、それはどこにありますか？ --- ご理解いただきたいのですが、問題が再現できるコードがないと問題の解決をすることは難しいです。

MIYABITSUJIMOTO

2020/08/25 07:44

申し訳ございません。コードに漏れがございました。 menuやjsMenuBtnがきちんと載っているコードを編集した際に載せております。ご確認いただければと思います。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにしてみてはいかがですか？

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は意外とややこしい仕様なので、あまり多用すると自分の首を絞めかねないです。

参考：
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA

投稿2020/08/25 07:57

編集2020/08/26 03:41

Lhankor_Mhy

総合スコア36115

MIYABITSUJIMOTO

2020/08/25 12:39

ご回答ありがとうございます。試してみたのですが、結局三menuは浮き上がりませんでした。またposition relativeを消すことで、横に隠pcサイズにした際れていたサイドメニューが出てきてしまいました。。。。。。。

Lhankor_Mhy

2020/08/25 13:16

当方では問題なく動作しましたので、ご提示いただいていない部分のコードの影響かもしれませんね。

Lhankor_Mhy

2020/08/25 13:19

特に、Sassでなにかのモジュールを使っているようですから、その影響が大きいのかもしれません。

MIYABITSUJIMOTO

2020/08/25 15:14

SASSでは@includeのみ使用しております。その影響でしょうか？他の部分も載せれるだけコードを新しく更新して載せさせていただきました。文字数の都合上フォントCSSなどは削除したので不細工なコードですが。。。心当たりとしては、背景の色の上に擬似要素で背景画像を重ねていることが悪いのでは？と思ったりもしたのですが、そちらは問題ではないでしょうか？

Lhankor_Mhy

2020/08/26 02:26

> 心当たりとしては、背景の色の上に擬似要素で背景画像を重ねていることが悪いのでは？まあ、そうですね。変えていいのですか？

MIYABITSUJIMOTO

2020/08/26 03:51

ありがとうございます。やり方は擬似要素ではなくてもいいのですが、背景色(白と黒の2色)と画像の配置のデザインは変えられないです。自宅に戻りましたら夜あたりに確認させていただきます。

MIYABITSUJIMOTO

2020/08/27 12:28

お返事が遅くなり大変申し訳ありません。無事にこちらで思うような実装を行うことができました。長い間ありがとうございました。

行動規範の内容に同意します