teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ドロワーメニューのアンカークリック時メニューを閉じたい

編集履歴

質問編集履歴

6

文字の追加

2020/07/30 16:16

投稿

masaki1117
masaki1117

スコア3

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  イメージ画像(レスポンシブのみハンバーガーメニュー表示)のメニュークリック時、メニューを閉じるにはどうしたらいいですか？
6
6
 
7
- 初学者のため、質問の仕方が不慣れですがよろしくお願いします。コードで教えていただくと幸いです。
7
+ 初学者のため、質問の仕方が不慣れですがよろしくお願いします。回答をコードで教えていただくと幸いです。
8
8
 
9
9
 
10
10
 
@@ -22,7 +22,7 @@
22
22
 
23
23
  drowのメニュー(アンカー)をクリック時閉じたい。
24
24
 
25
-
25
+ アンカーをクリック時、ドロワーメニューが閉じません。
26
26
 
27
27
 
28
28
 

5

文字の追加

2020/07/30 16:16

投稿

masaki1117
masaki1117

スコア3

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  イメージ画像(レスポンシブのみハンバーガーメニュー表示)のメニュークリック時、メニューを閉じるにはどうしたらいいですか？
6
6
 
7
- 初学者のため、質問の仕方が不慣れですがよろしくお願いします。
7
+ 初学者のため、質問の仕方が不慣れですがよろしくお願いします。コードで教えていただくと幸いです。
8
8
 
9
9
 
10
10
 

4

画像の追加　コードの補足

2020/07/29 02:05

投稿

masaki1117
masaki1117

スコア3

test CHANGED
File without changes
test CHANGED
@@ -26,6 +26,8 @@
26
26
 
27
27
 
28
28
 
29
+
30
+
29
31
  ```
30
32
 
31
33
  HTML

3

画像追加

2020/07/28 13:25

投稿

masaki1117
masaki1117

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,13 +1,17 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
-
4
-
5
-
6
-
7
- ハンバーガーメニューをクリックしたら、右からメニューが出てきます。
8
-
9
3
  メニューのアンカー(リンク)をクリックしたら閉じるようにしたいです。
10
4
 
5
+ イメージ画像(レスポンシブのみハンバーガーメニュー表示)のメニュークリック時、メニューを閉じるにはどうしたらいいですか？
6
+
7
+ 初学者のため、質問の仕方が不慣れですがよろしくお願いします。
8
+
9
+
10
+
11
+ ![イメージ説明](2f25aec269fb8862a9f3a9b05016bfe2.png)
12
+
13
+
14
+
11
15
 
12
16
 
13
17
 

2

誤字、コードの記載と追加

2020/07/28 12:21

投稿

masaki1117
masaki1117

スコア3

test CHANGED
File without changes
test CHANGED
@@ -174,6 +174,8 @@
174
174
 
175
175
  overflow-x: hidden;
176
176
 
177
+ 　　 background-color: beige;
178
+
177
179
  }
178
180
 
179
181
 

1

HTMLとCSSを記載しました。先ほどよりはわかりやすいと思います。

2020/07/28 12:12

投稿

masaki1117
masaki1117

スコア3

test CHANGED
File without changes
test CHANGED
@@ -12,19 +12,49 @@
12
12
 
13
13
 
14
14
 
15
+
16
+
15
17
  ### 発生している問題・エラーメッセージ
16
18
 
17
- drowのa(アンカー)クリック時メニューを閉じたい。
19
+ drowのメニュー(アンカー)をクリック時閉じたい。
18
-
19
- トップへ戻るボタンとスムーススクロールはうまく動きますが、メニューがどうしても閉じれません。
20
+
21
+
22
+
23
+
20
24
 
21
25
  ```
22
26
 
23
-
27
+ HTML
28
+
29
+
30
+
24
-
31
+ <!DOCTYPE html><!-- ///始め-----終わり/// -->
32
+
33
+ <html lang="ja">
34
+
35
+ <head>
36
+
37
+ <meta charset="UTF-8">
38
+
39
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
40
+
41
+ <title>サンプル</title>
42
+
25
- ### 該当のソースコード　　　HTML
43
+ <!-- CSS -->
44
+
26
-
45
+ <link rel="stylesheet" type="text/css" href="style.css">
46
+
27
-
47
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
48
+
49
+ <script type="text/javascript" src="javascript.js"></script>
50
+
51
+ </head>
52
+
53
+ <body>
54
+
55
+ <div class="wrapper">
56
+
57
+ <!-- ///header -->
28
58
 
29
59
  <header>
30
60
 
@@ -74,12 +104,596 @@
74
104
 
75
105
  <!-- header/// -->
76
106
 
107
+ <br><br><br><br><br><br><br><br>
108
+
109
+ <br><br><br><br><br><br><br><br>
110
+
111
+ <br><br><br><br><br><br><br><br>
112
+
113
+ <br><br><br><br><br><br><br><br>
114
+
115
+ <br><br><br><br><br><br><br><br>
116
+
117
+ <br><br><br><br><br><br><br><br>
118
+
119
+ <br><br><br><br><br>
120
+
121
+
122
+
123
+
124
+
125
+ </div><!-- wrapper -->
126
+
127
+ </body>
128
+
129
+ </html>
130
+
77
131
  ```
78
132
 
79
-
133
+ ***
134
+
135
+ ```CSS
136
+
137
+ CSS
138
+
139
+
140
+
141
+ 　　
142
+
143
+ @charset "UTF-8";
144
+
145
+
146
+
147
+ /* 共通部分
148
+
149
+ --------------------------------------------------------------------------------------- */
150
+
151
+ html {
152
+
153
+ font-size: 62.5%;
154
+
155
+ font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
156
+
157
+ }
158
+
159
+
160
+
161
+
162
+
163
+ body {
164
+
165
+ margin: 0px auto;
166
+
167
+ padding: 0px;
168
+
169
+ text-align: center;
170
+
171
+ width: 100%;
172
+
173
+ line-height: 1.5;
174
+
175
+ overflow-x: hidden;
176
+
177
+ }
178
+
179
+
180
+
181
+ .wrapper {
182
+
183
+ margin: 0 auto;
184
+
185
+ text-align: left;
186
+
187
+ width: 1024px;
188
+
189
+ max-width: 100%;
190
+
191
+ overflow: hidden;
192
+
193
+ position: relative;
194
+
195
+ }
196
+
197
+
198
+
199
+ /* header
200
+
201
+ ------------------------------------------------------------------------------------------------*/
202
+
203
+ .gnav {
204
+
205
+ display: flex;
206
+
207
+ -webkit-display: flex;
208
+
209
+ background-color: #699261;
210
+
211
+ height: 70px;
212
+
213
+ align-items: center;
214
+
215
+ -webkit-align-items: center;
216
+
217
+ list-style: none;
218
+
219
+ }
220
+
221
+
222
+
223
+ .gnav h1 {
224
+
225
+ margin-right: auto;
226
+
227
+ color: #222;
228
+
229
+ font-size: 4rem;
230
+
231
+ height: 60px;
232
+
233
+ }
234
+
235
+
236
+
237
+ .gnav a {
238
+
239
+ text-decoration: none;
240
+
241
+ font-size: 1.6rem;
242
+
243
+ padding-left: 15px;
244
+
245
+ padding-right: 15px;
246
+
247
+ color: #333;
248
+
249
+ }
250
+
251
+
252
+
253
+ .gnav a:hover {
254
+
255
+ color: #3B5998;
256
+
257
+ }
258
+
259
+
260
+
261
+ .gnav ul {
262
+
263
+ display: flex;
264
+
265
+ -webkit-display: flex;
266
+
267
+ display: -ms-flexbox;
268
+
269
+ list-style: none;
270
+
271
+ }
272
+
273
+
274
+
275
+ .gnav li {
276
+
277
+ height: 19px;
278
+
279
+ }
280
+
281
+
282
+
283
+ .gnav a {
284
+
285
+ position: relative;
286
+
287
+ display: inline-block;
288
+
289
+ text-decoration: none;
290
+
291
+ }
292
+
293
+
294
+
295
+ .gnav a::after {
296
+
297
+ position: absolute;
298
+
299
+ left: 0;
300
+
301
+ bottom: 2px;
302
+
303
+ content: '';
304
+
305
+ width: 100%;
306
+
307
+ height: 2px;
308
+
309
+ background: #3B5998;
310
+
311
+ opacity: 0;
312
+
313
+ visibility: hidden;
314
+
315
+ transition: .3s;
316
+
317
+ }
318
+
319
+
320
+
321
+ .gnav a:hover::after {
322
+
323
+ bottom: -4px;
324
+
325
+ opacity: 1;
326
+
327
+ visibility: visible;
328
+
329
+ }
330
+
331
+
332
+
333
+
334
+
335
+ /*ハンバーガーメニュー
336
+
337
+ ---------------------------------------------------------------------------------*/
338
+
339
+ .humburger {
340
+
341
+ background-color: beige;
342
+
343
+ position: absolute;
344
+
345
+ top: 15px;
346
+
347
+ right: 15px;
348
+
349
+ width: 40px;
350
+
351
+ height: 40px;
352
+
353
+ z-index: 2;
354
+
355
+ }
356
+
357
+
358
+
359
+
360
+
361
+ /*背景
362
+
363
+ -----------------------------------------------------------------------------------*/
364
+
365
+ .humburger span {
366
+
367
+ width: 30px;
368
+
369
+ height: 1.5px;
370
+
371
+ background-color: #333;
372
+
373
+ position: absolute;
374
+
375
+ top: 50%;
376
+
377
+ left: 50%;
378
+
379
+ transform: translate(-50%, -50%);
380
+
381
+ transition: 0.3s;
382
+
383
+ }
384
+
385
+
386
+
387
+ .humburger span:nth-of-type(1) {
388
+
389
+ transform: translate(-50%, -10px);
390
+
391
+ }
392
+
393
+
394
+
395
+ .humburger span:nth-of-type(3) {
396
+
397
+ transform: translate(-50%, 9px);
398
+
399
+ }
400
+
401
+
402
+
403
+
404
+
405
+ /*☓ボタン
406
+
407
+ -----------------------------------------------------------------------------------------*/
408
+
409
+ .humburger.active span:nth-of-type(1) {
410
+
411
+ transform: rotate(45deg) translate(-50%, 0);
412
+
413
+ transform-origin: 0% 50%;
414
+
415
+ }
416
+
417
+
418
+
419
+ .humburger.active span:nth-of-type(2) {
420
+
421
+ opacity: 0;
422
+
423
+ }
424
+
425
+
426
+
427
+ .humburger.active span:nth-of-type(3) {
428
+
429
+ transform: rotate(-45deg) translate(-50%, 0);
430
+
431
+ transform-origin: 0% 50%;
432
+
433
+ }
434
+
435
+
436
+
437
+ /*----------------------------------------------------------------*/
438
+
439
+ /*レスポンシブ　メディアクエリー　(1024px～320px)
440
+
441
+ ------------------------------------------------------------------*/
442
+
443
+ @media screen and (min-width: 1025px) {
444
+
445
+
446
+
447
+ .humburger {
448
+
449
+ display: none;
450
+
451
+ }
452
+
453
+ }
454
+
455
+ /*----------------------------------------------------------------*/
456
+
457
+ @media screen and (max-width: 1024px) and (min-width: 1000px) {
458
+
459
+
460
+
461
+ .humburger {
462
+
463
+ display: none;
464
+
465
+ }
466
+
467
+ }
468
+
469
+
470
+
471
+ @media screen and (max-width: 999px) and (min-width: 768px) {
472
+
473
+ /*---------------------------------------------------------------*/
474
+
475
+ .humburger {
476
+
477
+ display: none;
478
+
479
+ }
480
+
481
+ }
482
+
483
+ /*---------------------------------------------------------------*/
484
+
485
+ @media screen and (max-width: 767px) and (min-width: 480px) {
486
+
487
+
488
+
489
+ /*ドロワーメニュー--------------*/
490
+
491
+ #drow {
492
+
493
+ position: absolute;
494
+
495
+ top: 0;
496
+
497
+ right: -200px;
498
+
499
+ width: 250px;
500
+
501
+ height: 100%;
502
+
503
+ padding: 70px 0 0 0;
504
+
505
+ opacity: 0;
506
+
507
+ transition: 0.4s;
508
+
509
+ visibility: hidden;
510
+
511
+ background-color: #ddd;
512
+
513
+ text-align: center;
514
+
515
+ z-index: 2;
516
+
517
+ }
518
+
519
+
520
+
521
+ #drow.active {
522
+
523
+ opacity: 0.9;
524
+
525
+ visibility: visible;
526
+
527
+ right: 0;
528
+
529
+ }
530
+
531
+
532
+
533
+ .gnav a {
534
+
535
+ font-size: 2rem;
536
+
537
+ color: black;
538
+
539
+ }
540
+
541
+
542
+
543
+ .gnav ul {
544
+
545
+ flex-direction: column;
546
+
547
+ margin: 0 auto;
548
+
549
+ }
550
+
551
+
552
+
553
+ .gnav li {
554
+
555
+ border-top: 2px solid #fff;
556
+
557
+ border-bottom: 2px solid #fff;
558
+
559
+ width: 250px;
560
+
561
+ padding-bottom: 49px;
562
+
563
+ }
564
+
565
+
566
+
567
+ .gnav li+li {
568
+
569
+ border-top: 0;
570
+
571
+ border-bottom: 2px solid #fff;
572
+
573
+ }
574
+
575
+
576
+
577
+ .gnav a {
578
+
579
+ padding-top: 20px;
580
+
581
+ }
582
+
583
+ }
584
+
585
+ /*---------------------------------------------------------------*/
586
+
587
+ @media screen and (max-width: 479px) and (min-width: 320px) {
588
+
589
+
590
+
591
+ /*ドロワーメニュー-----------------------------*/
592
+
593
+ #drow {
594
+
595
+ position: absolute;
596
+
597
+ top: 0;
598
+
599
+ right: -250px;
600
+
601
+ width: 250px;
602
+
603
+ height: 100%;
604
+
605
+ padding: 70px 0 0 0;
606
+
607
+ opacity: 0;
608
+
609
+ transition: 0.4s;
610
+
611
+ visibility: hidden;
612
+
613
+ background-color: #ddd;
614
+
615
+ text-align: center;
616
+
617
+ z-index: 2;
618
+
619
+ }
620
+
621
+
622
+
623
+ #drow.active {
624
+
625
+ opacity: 0.9;
626
+
627
+ visibility: visible;
628
+
629
+ right: 0;
630
+
631
+ }
632
+
633
+
634
+
635
+ .gnav a {
636
+
637
+ font-size: 2rem;
638
+
639
+ color: black;
640
+
641
+ }
642
+
643
+
644
+
645
+ .gnav ul {
646
+
647
+ flex-direction: column;
648
+
649
+ margin: 0 auto;
650
+
651
+ }
652
+
653
+
654
+
655
+ .gnav li {
656
+
657
+ border-top: 2px solid #fff;
658
+
659
+ border-bottom: 2px solid #fff;
660
+
661
+ width: 250px;
662
+
663
+ padding-bottom: 49px;
664
+
665
+ }
666
+
667
+
668
+
669
+ .gnav li+li {
670
+
671
+ border-top: 0;
672
+
673
+ border-bottom: 2px solid #fff;
674
+
675
+ }
676
+
677
+
678
+
679
+ .gnav a {
680
+
681
+ padding-top: 20px;
682
+
683
+ }
684
+
685
+ }
686
+
687
+ /*---------------------------------------------------------------*/
688
+
689
+ ```
690
+
691
+ ***
80
692
 
81
693
  ```javascript
82
694
 
695
+ /*-----ハンバーガーメニューとドロワーメニューの動き------*/
696
+
83
697
  document.addEventListener('DOMContentLoaded', function() {
84
698
 
85
699
  document.getElementById("humburger").addEventListener("click", function() {
@@ -96,10 +710,16 @@
96
710
 
97
711
 
98
712
 
713
+
714
+
99
715
  ### 試したこと
100
716
 
101
717
  クリック時クラスを削除しましたがうまくいきません。
102
718
 
719
+ drow a にクラスをつけてクリック時閉じること。
720
+
721
+
722
+
103
723
 
104
724
 
105
725
 
@@ -110,7 +730,7 @@
110
730
 
111
731
  $('drow a[href^="#"]').click(function(){
112
732
 
113
- $('humburger.').removeclass("active");
733
+ $('humburger').removeclass("active");
114
734
 
115
735
  })
116
736