teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問humbergerメニュークリック時に、drawer表示on,offさせたい

編集履歴

質問編集履歴

8

修正いたしました

2021/10/21 00:36

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -373,7 +373,7 @@
373
373
  $('.overlay').on('click',function(){
374
374
  if($(this).hasClass('_open')){
375
375
  $(this).removeClass('_open');
376
- $('.humberger. .line').removeClass('_open');
376
+ $('.humberger. , .line').removeClass('_open');
377
377
  $('main').removeClass('_open');
378
378
  $('nav').removeClass('_open');
379
379
  }

7

修正いたしました

2021/10/21 00:36

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -42,44 +42,46 @@
42
42
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
43
43
  <link rel="stylesheet" href="./css/style.css">
44
44
  </head>
45
+ <div class="nav-wrapper">
45
- <header class="header">
46
+ <header class="header">
46
- <div class="header-inner">
47
+ <div class="header-inner">
47
- <div class="header-left">
48
+ <div class="header-left">
48
- <h1 class="logo">
49
+ <h1 class="logo">
49
- <a href="#">
50
+ <a href="#">
50
- <img class="header-logo" src="/img/top-header-logo.png" alt="">
51
+ <img class="header-logo" src="/img/top-header-logo.png" alt="">
51
- </a>
52
+ </a>
52
- </h1>
53
+ </h1>
54
+
55
+ <nav class="nav nav-open drawer-nav">
56
+ <ul class="header-list">
57
+ <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
58
+ <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
59
+ <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
60
+ </ul><!-- /.header-list -->
61
+ </nav><!-- /.nav -->
53
62
 
54
- <nav class="nav drawer-nav">
55
- <ul class="header-list">
56
- <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
57
- <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
58
- <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
59
- </ul><!-- /.header-list -->
60
- </nav><!-- /.nav -->
61
- <div class="overlay"></div><!-- /.overlay -->
62
- </div>
63
+ </div>
63
- <div class="header-right">
64
+ <div class="header-right">
64
- <div class="header-link " id="js-modal">
65
+ <div class="header-link " id="js-modal">
65
- <a class="calender-link js-modal-open" href="#">
66
+ <a class="calender-link js-modal-open" href="#">
66
- <!-- <img src="./img/calender.png" alt="カレンダー"> -->
67
+ <!-- <img src="./img/calender.png" alt="カレンダー"> -->
67
- 宿泊予約
68
+ 宿泊予約
68
- </a>
69
+ </a>
69
- </div><!-- /.header-link -->
70
+ </div><!-- /.header-link -->
70
71
 
71
- <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
72
+ <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
72
- <span class="line"></span ><span class="line"></span><span class="line"></span>
73
+ <span class="line"></span ><span class="line"></span><span class="line"></span>
73
- </button>
74
+ </button>
74
- </div><!-- /.header-right -->
75
+ </div><!-- /.header-right -->
75
- </div><!-- /.header-inner -->
76
+ </div><!-- /.header-inner -->
76
- </header><!-- /.header -->
77
+ </header><!-- /.header -->
78
+ <div class="overlay"></div><!-- /.overlay -->
79
+ </div><!-- /.nav-wrapper -->
77
80
  </body>
78
81
  </html>
79
82
 
80
83
  ```
81
84
  ```CSS
82
-
83
85
  .header {
84
86
  position: fixed;
85
87
  top: 0;
@@ -209,7 +211,7 @@
209
211
  }
210
212
 
211
213
  @media screen and (min-width: 600px) and (max-width: 1179px) {
212
- .header-left .drawer-nav_active {
214
+ .header-left .nav-open {
213
215
  top: 80px;
214
216
  position: fixed;
215
217
  z-index: 2;
@@ -217,13 +219,11 @@
217
219
  width: 16.25rem;
218
220
  background-color: #000;
219
221
  width: 50%;
220
- -webkit-transform: translateZ(0);
221
- transform: translateZ(0);
222
222
  }
223
223
  }
224
224
 
225
225
  @media screen and (max-width: 599px) {
226
- .header-left .drawer-nav_active {
226
+ .header-left .nav-open {
227
227
  top: 60px;
228
228
  position: fixed;
229
229
  z-index: 2;
@@ -236,27 +236,11 @@
236
236
  }
237
237
  }
238
238
 
239
- .header-left .overlay {
239
+ .header-left .drawer-nav_active {
240
- content: "";
241
- display: block;
242
- width: 0;
243
- height: 0;
244
- background-color: rgba(0, 0, 0, 0.5);
245
- position: absolute;
246
- top: 0;
247
- left: 0;
248
- z-index: 2;
249
- opacity: 0;
250
- -webkit-transition: opacity .5s;
240
+ -webkit-transform: translateZ(0);
251
- transition: opacity .5s;
241
+ transform: translateZ(0);
252
242
  }
253
243
 
254
- .header-left .overlay._open {
255
- width: 100%;
256
- height: 100%;
257
- opacity: 1;
258
- }
259
-
260
244
  .header-right {
261
245
  margin-left: auto;
262
246
  }
@@ -327,23 +311,60 @@
327
311
  .header-right .header-link .calender-link:hover {
328
312
  background-color: #000;
329
313
  }
314
+
315
+ .nav-wrapper {
316
+ height: 100%;
317
+ overflow-x: hidden;
318
+ position: relative;
319
+ }
320
+
321
+ .overlay {
322
+ content: "";
323
+ display: block;
324
+ width: 0;
325
+ height: 0;
326
+ background-color: rgba(0, 0, 0, 0.5);
327
+ position: absolute;
328
+ top: 0;
329
+ left: 0;
330
+ z-index: 2;
331
+ opacity: 0;
332
+ -webkit-transition: opacity .5s;
333
+ transition: opacity .5s;
334
+ }
335
+
336
+ .overlay._open {
337
+ width: 100%;
338
+ height: 100%;
339
+ opacity: 1;
340
+ }
341
+
330
342
  ```
331
343
 
332
344
  ```js
345
+ $(function(){
333
346
 
334
347
  $(".humburger").on('click', function(){
348
+ //humberger
335
349
  $(this).toggleClass("_open");
336
- $(".nav, .line").toggleClass("_open");
350
+ $(".line").toggleClass("_open");
351
+
352
+ //nav
353
+ $(".nav").addClass("nav-open");
337
354
  $(".drawer-nav").toggleClass("_active");
338
355
 
339
356
  if($("this").hasClass('_active')){
340
357
  $(this).removeClass('_active');
358
+
341
359
  $(".drawer-nav").removeClass('_active');
360
+ $(".nav").removeClass("nav-open");
342
361
  $(".line").removeClass('_open');
343
362
  $('.overlay').removeClass('_open');
344
363
  }else{
345
- $(this).addClass('_active');
364
+ $(this).addClass('_active');
346
365
  $('.drawer-nav').addClass('_active');
366
+
367
+ $(".nav").addClass("nav-open");
347
368
  $('.line').addClass('_open');
348
369
  $('.overlay').addClass('_open');
349
370
  }
@@ -352,11 +373,10 @@
352
373
  $('.overlay').on('click',function(){
353
374
  if($(this).hasClass('_open')){
354
375
  $(this).removeClass('_open');
355
- $('.menu-trigger').removeClass('_active');
376
+ $('.humberger. .line').removeClass('_open');
356
377
  $('main').removeClass('_open');
357
378
  $('nav').removeClass('_open');
358
379
  }
359
380
  });
360
381
  });
361
- ```
382
+ ```
362
- ### 補足情報（FW/ツールのバージョンなど）

6

HTMLも修正いたしました

2021/10/20 17:04

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -42,15 +42,16 @@
42
42
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
43
43
  <link rel="stylesheet" href="./css/style.css">
44
44
  </head>
45
- <header class="header">
45
+ <header class="header">
46
46
  <div class="header-inner">
47
47
  <div class="header-left">
48
48
  <h1 class="logo">
49
49
  <a href="#">
50
- <img src="/img/top-header-logo.png" alt="">
50
+ <img class="header-logo" src="/img/top-header-logo.png" alt="">
51
51
  </a>
52
52
  </h1>
53
+
53
- <nav class="nav drawer-nav">
54
+ <nav class="nav drawer-nav">
54
55
  <ul class="header-list">
55
56
  <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
56
57
  <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
@@ -58,7 +59,7 @@
58
59
  </ul><!-- /.header-list -->
59
60
  </nav><!-- /.nav -->
60
61
  <div class="overlay"></div><!-- /.overlay -->
61
- </div>
62
+ </div>
62
63
  <div class="header-right">
63
64
  <div class="header-link " id="js-modal">
64
65
  <a class="calender-link js-modal-open" href="#">
@@ -73,6 +74,9 @@
73
74
  </div><!-- /.header-right -->
74
75
  </div><!-- /.header-inner -->
75
76
  </header><!-- /.header -->
77
+ </body>
78
+ </html>
79
+
76
80
  ```
77
81
  ```CSS
78
82
 

5

修正いたしました

2021/10/20 10:42

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -100,6 +100,13 @@
100
100
  }
101
101
  }
102
102
 
103
+ @media screen and (max-width: 599px) {
104
+ .header {
105
+ padding: 8px 10px;
106
+ max-height: 60px;
107
+ }
108
+ }
109
+
103
110
  .header-inner {
104
111
  max-width: 1880px;
105
112
  width: 100%;
@@ -161,34 +168,6 @@
161
168
  } */
162
169
  }
163
170
 
164
- @media screen and (min-width: 600px) and (max-width: 1179px) {
165
- .header-left .nav .drawer-nav_active {
166
- top: 80px;
167
- position: fixed;
168
- z-index: 2;
169
- overflow: hidden;
170
- width: 16.25rem;
171
- background-color: #000;
172
- width: 50%;
173
- -webkit-transform: translateZ(0);
174
- transform: translateZ(0);
175
- }
176
- }
177
-
178
- @media screen and (max-width: 599px) {
179
- .header-left .nav .drawer-nav_active {
180
- top: 60px;
181
- position: fixed;
182
- z-index: 2;
183
- overflow: hidden;
184
- width: 16.25rem;
185
- background-color: rgba(0, 0, 0, 0.9);
186
- width: 75%;
187
- -webkit-transform: translateZ(0);
188
- transform: translateZ(0);
189
- }
190
- }
191
-
192
171
  .header-left .nav .header-list {
193
172
  display: -webkit-box;
194
173
  display: -webkit-flex;
@@ -225,6 +204,34 @@
225
204
  /* 0.3秒で拡大までの時間 */
226
205
  }
227
206
 
207
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
208
+ .header-left .drawer-nav_active {
209
+ top: 80px;
210
+ position: fixed;
211
+ z-index: 2;
212
+ overflow: hidden;
213
+ width: 16.25rem;
214
+ background-color: #000;
215
+ width: 50%;
216
+ -webkit-transform: translateZ(0);
217
+ transform: translateZ(0);
218
+ }
219
+ }
220
+
221
+ @media screen and (max-width: 599px) {
222
+ .header-left .drawer-nav_active {
223
+ top: 60px;
224
+ position: fixed;
225
+ z-index: 2;
226
+ overflow: hidden;
227
+ width: 16.25rem;
228
+ background-color: rgba(0, 0, 0, 0.9);
229
+ width: 75%;
230
+ -webkit-transform: translateZ(0);
231
+ transform: translateZ(0);
232
+ }
233
+ }
234
+
228
235
  .header-left .overlay {
229
236
  content: "";
230
237
  display: block;
@@ -256,7 +263,16 @@
256
263
  }
257
264
  }
258
265
 
259
- .header-right .header-link {}
266
+ .header-right .header-link {
267
+ /* height: calc(54/80*100%);
268
+ background-color: $link-color;
269
+ border-radius: 3px;
270
+ padding: 15px 35px;
271
+ display: flex;
272
+ justify-content: flex-end;
273
+ align-items: center; */
274
+ }
275
+
260
276
  @media screen and (min-width: 600px) and (max-width: 1179px) {
261
277
  .header-right .header-link {
262
278
  margin-left: auto;
@@ -310,19 +326,20 @@
310
326
  ```
311
327
 
312
328
  ```js
329
+
313
- $(".humburger").on('click', function(){
330
+ $(".humburger").on('click', function(){
314
331
  $(this).toggleClass("_open");
315
332
  $(".nav, .line").toggleClass("_open");
316
333
  $(".drawer-nav").toggleClass("_active");
317
334
 
318
335
  if($("this").hasClass('_active')){
319
336
  $(this).removeClass('_active');
320
- $(".drawer-nav").removeClass('_open');
337
+ $(".drawer-nav").removeClass('_active');
321
338
  $(".line").removeClass('_open');
322
339
  $('.overlay').removeClass('_open');
323
340
  }else{
324
341
  $(this).addClass('_active');
325
- $('.drawer-nav').addClass('_open');
342
+ $('.drawer-nav').addClass('_active');
326
343
  $('.line').addClass('_open');
327
344
  $('.overlay').addClass('_open');
328
345
  }

4

修正しました

2021/10/20 10:38

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -330,10 +330,10 @@
330
330
 
331
331
  $('.overlay').on('click',function(){
332
332
  if($(this).hasClass('_open')){
333
- $(this).removeClass('open');
333
+ $(this).removeClass('_open');
334
- $('.menu-trigger').removeClass('active');
334
+ $('.menu-trigger').removeClass('_active');
335
- $('main').removeClass('open');
335
+ $('main').removeClass('_open');
336
- $('nav').removeClass('open');
336
+ $('nav').removeClass('_open');
337
337
  }
338
338
  });
339
339
  });

3

文言修正しました

2021/10/19 13:31

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -6,6 +6,10 @@
6
6
  ![現状](73361fa80b3fc12a7c155f8d6ca59b0d.jpeg)
7
7
 
8
8
 
9
+ Googleソース非表示
10
+ ![Googleソース非表示](9b6961ae000e842f79bcd27196676e1c.jpeg)
11
+
12
+
9
13
  ### 発生している問題・エラーメッセージ
10
14
 
11
15
  ```

2

修正しました

2021/10/19 10:32

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -306,11 +306,7 @@
306
306
  ```
307
307
 
308
308
  ```js
309
- $(function(){
310
- //humburger関数
311
- // const humburger=$('.humburger')
312
-
313
- $(".humburger").on('click', function(){
309
+ $(".humburger").on('click', function(){
314
310
  $(this).toggleClass("_open");
315
311
  $(".nav, .line").toggleClass("_open");
316
312
  $(".drawer-nav").toggleClass("_active");
@@ -327,9 +323,9 @@
327
323
  $('.overlay').addClass('_open');
328
324
  }
329
325
  });
330
- //navを戻す
326
+
331
- $('.overlay').on('click',function(){
327
+ $('.overlay').on('click',function(){
332
- if($(this).hasClass('open')){
328
+ if($(this).hasClass('_open')){
333
329
  $(this).removeClass('open');
334
330
  $('.menu-trigger').removeClass('active');
335
331
  $('main').removeClass('open');
@@ -337,6 +333,5 @@
337
333
  }
338
334
  });
339
335
  });
340
- });
341
336
  ```
342
337
  ### 補足情報（FW/ツールのバージョンなど）

1

修正いたしました

2021/10/19 09:27

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,9 @@
3
3
  下記サイトのようなnavを表示させたい。
4
4
  [drawer](http://demo.tivel.jp/n/drawer/)
5
5
 
6
+ ![現状](73361fa80b3fc12a7c155f8d6ca59b0d.jpeg)
6
7
 
8
+
7
9
  ### 発生している問題・エラーメッセージ
8
10
 
9
11
  ```