質問編集履歴

8

修正いたしました

2021/10/21 00:36

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -748,7 +748,7 @@
748
748
 
749
749
  $(this).removeClass('_open');
750
750
 
751
- $('.humberger. .line').removeClass('_open');
751
+ $('.humberger. , .line').removeClass('_open');
752
752
 
753
753
  $('main').removeClass('_open');
754
754
 

7

修正いたしました

2021/10/21 00:36

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -86,69 +86,75 @@
86
86
 
87
87
  </head>
88
88
 
89
+ <div class="nav-wrapper">
90
+
89
- <header class="header">
91
+ <header class="header">
90
-
92
+
91
- <div class="header-inner">
93
+ <div class="header-inner">
92
-
94
+
93
- <div class="header-left">
95
+ <div class="header-left">
94
-
96
+
95
- <h1 class="logo">
97
+ <h1 class="logo">
96
-
98
+
97
- <a href="#">
99
+ <a href="#">
98
-
100
+
99
- <img class="header-logo" src="/img/top-header-logo.png" alt="">
101
+ <img class="header-logo" src="/img/top-header-logo.png" alt="">
100
-
102
+
101
- </a>
103
+ </a>
102
-
104
+
103
- </h1>
105
+ </h1>
106
+
107
+
108
+
109
+ <nav class="nav nav-open drawer-nav">
110
+
111
+ <ul class="header-list">
112
+
113
+ <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
114
+
115
+ <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
116
+
117
+ <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
118
+
119
+ </ul><!-- /.header-list -->
120
+
121
+ </nav><!-- /.nav -->
104
122
 
105
123
 
106
124
 
107
- <nav class="nav drawer-nav">
125
+ </div>
108
-
126
+
109
- <ul class="header-list">
127
+ <div class="header-right">
110
-
128
+
111
- <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
129
+ <div class="header-link " id="js-modal">
112
-
130
+
113
- <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
131
+ <a class="calender-link js-modal-open" href="#">
114
-
132
+
115
- <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
133
+ <!-- <img src="./img/calender.png" alt="カレンダー"> -->
134
+
116
-
135
+ 宿泊予約
136
+
137
+ </a>
138
+
117
- </ul><!-- /.header-list -->
139
+ </div><!-- /.header-link -->
140
+
141
+
142
+
118
-
143
+ <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
144
+
145
+ <span class="line"></span ><span class="line"></span><span class="line"></span>
146
+
147
+ </button>
148
+
149
+ </div><!-- /.header-right -->
150
+
151
+ </div><!-- /.header-inner -->
152
+
119
- </nav><!-- /.nav -->
153
+ </header><!-- /.header -->
120
-
154
+
121
- <div class="overlay"></div><!-- /.overlay -->
155
+ <div class="overlay"></div><!-- /.overlay -->
122
-
123
- </div>
156
+
124
-
125
- <div class="header-right">
126
-
127
- <div class="header-link " id="js-modal">
128
-
129
- <a class="calender-link js-modal-open" href="#">
130
-
131
- <!-- <img src="./img/calender.png" alt="カレンダー"> -->
132
-
133
- 宿泊予約
134
-
135
- </a>
136
-
137
- </div><!-- /.header-link -->
138
-
139
-
140
-
141
- <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
142
-
143
- <span class="line"></span ><span class="line"></span><span class="line"></span>
144
-
145
- </button>
146
-
147
- </div><!-- /.header-right -->
148
-
149
- </div><!-- /.header-inner -->
157
+ </div><!-- /.nav-wrapper -->
150
-
151
- </header><!-- /.header -->
152
158
 
153
159
  </body>
154
160
 
@@ -160,8 +166,6 @@
160
166
 
161
167
  ```CSS
162
168
 
163
-
164
-
165
169
  .header {
166
170
 
167
171
  position: fixed;
@@ -420,7 +424,7 @@
420
424
 
421
425
  @media screen and (min-width: 600px) and (max-width: 1179px) {
422
426
 
423
- .header-left .drawer-nav_active {
427
+ .header-left .nav-open {
424
428
 
425
429
  top: 80px;
426
430
 
@@ -436,6 +440,30 @@
436
440
 
437
441
  width: 50%;
438
442
 
443
+ }
444
+
445
+ }
446
+
447
+
448
+
449
+ @media screen and (max-width: 599px) {
450
+
451
+ .header-left .nav-open {
452
+
453
+ top: 60px;
454
+
455
+ position: fixed;
456
+
457
+ z-index: 2;
458
+
459
+ overflow: hidden;
460
+
461
+ width: 16.25rem;
462
+
463
+ background-color: rgba(0, 0, 0, 0.9);
464
+
465
+ width: 75%;
466
+
439
467
  -webkit-transform: translateZ(0);
440
468
 
441
469
  transform: translateZ(0);
@@ -446,38 +474,174 @@
446
474
 
447
475
 
448
476
 
477
+ .header-left .drawer-nav_active {
478
+
479
+ -webkit-transform: translateZ(0);
480
+
481
+ transform: translateZ(0);
482
+
483
+ }
484
+
485
+
486
+
487
+ .header-right {
488
+
489
+ margin-left: auto;
490
+
491
+ }
492
+
493
+
494
+
449
495
  @media screen and (max-width: 599px) {
450
496
 
451
- .header-left .drawer-nav_active {
452
-
453
- top: 60px;
454
-
455
- position: fixed;
456
-
457
- z-index: 2;
458
-
459
- overflow: hidden;
460
-
461
- width: 16.25rem;
462
-
463
- background-color: rgba(0, 0, 0, 0.9);
464
-
465
- width: 75%;
466
-
467
- -webkit-transform: translateZ(0);
468
-
469
- transform: translateZ(0);
470
-
471
- }
472
-
473
- }
474
-
475
-
476
-
477
- .header-left .overlay {
497
+ .header-right {
498
+
499
+ margin-left: 20px;
500
+
501
+ }
502
+
503
+ }
504
+
505
+
506
+
507
+ .header-right .header-link {
508
+
509
+ /* height: calc(54/80*100%);
510
+
511
+ background-color: $link-color;
512
+
513
+ border-radius: 3px;
514
+
515
+ padding: 15px 35px;
516
+
517
+ display: flex;
518
+
519
+ justify-content: flex-end;
520
+
521
+ align-items: center; */
522
+
523
+ }
524
+
525
+
526
+
527
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
528
+
529
+ .header-right .header-link {
530
+
531
+ margin-left: auto;
532
+
533
+ }
534
+
535
+ }
536
+
537
+
538
+
539
+ .header-right .header-link .calender-link {
540
+
541
+ display: block;
542
+
543
+ background-color: #978F10;
544
+
545
+ text-decoration: none;
546
+
547
+ font-weight: bold;
548
+
549
+ -webkit-box-align: center;
550
+
551
+ -webkit-align-items: center;
552
+
553
+ -ms-flex-align: center;
554
+
555
+ align-items: center;
556
+
557
+ text-align: center;
558
+
559
+ color: #fff;
560
+
561
+ padding: 10px 37px;
562
+
563
+ font-size: 1.6rem;
564
+
565
+ -webkit-transition: .3s;
566
+
567
+ transition: .3s;
568
+
569
+ }
570
+
571
+
572
+
573
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
574
+
575
+ .header-right .header-link .calender-link {
576
+
577
+ margin-right: 100px;
578
+
579
+ }
580
+
581
+ }
582
+
583
+
584
+
585
+ @media screen and (max-width: 599px) {
586
+
587
+ .header-right .header-link .calender-link {
588
+
589
+ padding: 8px 16px;
590
+
591
+ font-size: 1.4rem;
592
+
593
+ }
594
+
595
+ }
596
+
597
+
598
+
599
+ .header-right .header-link .calender-link::before {
478
600
 
479
601
  content: "";
480
602
 
603
+ display: inline-block;
604
+
605
+ margin: -3px 5px 0 0;
606
+
607
+ background: url(../../img/calender.png) no-repeat;
608
+
609
+ background-size: contain;
610
+
611
+ vertical-align: middle;
612
+
613
+ width: 22px;
614
+
615
+ height: 22px;
616
+
617
+ }
618
+
619
+
620
+
621
+ .header-right .header-link .calender-link:hover {
622
+
623
+ background-color: #000;
624
+
625
+ }
626
+
627
+
628
+
629
+ .nav-wrapper {
630
+
631
+ height: 100%;
632
+
633
+ overflow-x: hidden;
634
+
635
+ position: relative;
636
+
637
+ }
638
+
639
+
640
+
641
+ .overlay {
642
+
643
+ content: "";
644
+
481
645
  display: block;
482
646
 
483
647
  width: 0;
@@ -504,7 +668,7 @@
504
668
 
505
669
 
506
670
 
507
- .header-left .overlay._open {
671
+ .overlay._open {
508
672
 
509
673
  width: 100%;
510
674
 
@@ -516,159 +680,29 @@
516
680
 
517
681
 
518
682
 
519
- .header-right {
520
-
521
- margin-left: auto;
522
-
523
- }
524
-
525
-
526
-
527
- @media screen and (max-width: 599px) {
528
-
529
- .header-right {
530
-
531
- margin-left: 20px;
532
-
533
- }
534
-
535
- }
536
-
537
-
538
-
539
- .header-right .header-link {
540
-
541
- /* height: calc(54/80*100%);
542
-
543
- background-color: $link-color;
544
-
545
- border-radius: 3px;
546
-
547
- padding: 15px 35px;
548
-
549
- display: flex;
550
-
551
- justify-content: flex-end;
552
-
553
- align-items: center; */
554
-
555
- }
556
-
557
-
558
-
559
- @media screen and (min-width: 600px) and (max-width: 1179px) {
560
-
561
- .header-right .header-link {
562
-
563
- margin-left: auto;
564
-
565
- }
566
-
567
- }
568
-
569
-
570
-
571
- .header-right .header-link .calender-link {
572
-
573
- display: block;
574
-
575
- background-color: #978F10;
576
-
577
- text-decoration: none;
578
-
579
- font-weight: bold;
580
-
581
- -webkit-box-align: center;
582
-
583
- -webkit-align-items: center;
584
-
585
- -ms-flex-align: center;
586
-
587
- align-items: center;
588
-
589
- text-align: center;
590
-
591
- color: #fff;
592
-
593
- padding: 10px 37px;
594
-
595
- font-size: 1.6rem;
596
-
597
- -webkit-transition: .3s;
598
-
599
- transition: .3s;
600
-
601
- }
602
-
603
-
604
-
605
- @media screen and (min-width: 600px) and (max-width: 1179px) {
606
-
607
- .header-right .header-link .calender-link {
608
-
609
- margin-right: 100px;
610
-
611
- }
612
-
613
- }
614
-
615
-
616
-
617
- @media screen and (max-width: 599px) {
618
-
619
- .header-right .header-link .calender-link {
620
-
621
- padding: 8px 16px;
622
-
623
- font-size: 1.4rem;
624
-
625
- }
626
-
627
- }
628
-
629
-
630
-
631
- .header-right .header-link .calender-link::before {
632
-
633
- content: "";
634
-
635
- display: inline-block;
636
-
637
- margin: -3px 5px 0 0;
638
-
639
- background: url(../../img/calender.png) no-repeat;
640
-
641
- background-size: contain;
642
-
643
- vertical-align: middle;
644
-
645
- width: 22px;
646
-
647
- height: 22px;
648
-
649
- }
650
-
651
-
652
-
653
- .header-right .header-link .calender-link:hover {
654
-
655
- background-color: #000;
656
-
657
- }
658
-
659
683
  ```
660
684
 
661
685
 
662
686
 
663
687
  ```js
664
688
 
689
+ $(function(){
690
+
665
691
 
666
692
 
667
693
  $(".humburger").on('click', function(){
668
694
 
695
+ //humberger
696
+
669
697
  $(this).toggleClass("_open");
670
698
 
671
- $(".nav, .line").toggleClass("_open");
699
+ $(".line").toggleClass("_open");
700
+
701
+
702
+
703
+ //nav
704
+
705
+ $(".nav").addClass("nav-open");
672
706
 
673
707
  $(".drawer-nav").toggleClass("_active");
674
708
 
@@ -678,18 +712,26 @@
678
712
 
679
713
  $(this).removeClass('_active');
680
714
 
715
+
716
+
681
717
  $(".drawer-nav").removeClass('_active');
682
718
 
719
+ $(".nav").removeClass("nav-open");
720
+
683
721
  $(".line").removeClass('_open');
684
722
 
685
723
  $('.overlay').removeClass('_open');
686
724
 
687
725
  }else{
688
726
 
689
- $(this).addClass('_active');
727
+ $(this).addClass('_active');
690
728
 
691
729
  $('.drawer-nav').addClass('_active');
692
730
 
731
+
732
+
733
+ $(".nav").addClass("nav-open");
734
+
693
735
  $('.line').addClass('_open');
694
736
 
695
737
  $('.overlay').addClass('_open');
@@ -706,7 +748,7 @@
706
748
 
707
749
  $(this).removeClass('_open');
708
750
 
709
- $('.menu-trigger').removeClass('_active');
751
+ $('.humberger. .line').removeClass('_open');
710
752
 
711
753
  $('main').removeClass('_open');
712
754
 
@@ -719,5 +761,3 @@
719
761
  });
720
762
 
721
763
  ```
722
-
723
- ### 補足情報(FW/ツールのバージョンなど)

6

HTMLも修正いたしました

2021/10/20 17:04

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
  </head>
88
88
 
89
- <header class="header">
89
+ <header class="header">
90
90
 
91
91
  <div class="header-inner">
92
92
 
@@ -96,13 +96,15 @@
96
96
 
97
97
  <a href="#">
98
98
 
99
- <img src="/img/top-header-logo.png" alt="">
99
+ <img class="header-logo" src="/img/top-header-logo.png" alt="">
100
100
 
101
101
  </a>
102
102
 
103
103
  </h1>
104
104
 
105
+
106
+
105
- <nav class="nav drawer-nav">
107
+ <nav class="nav drawer-nav">
106
108
 
107
109
  <ul class="header-list">
108
110
 
@@ -118,7 +120,7 @@
118
120
 
119
121
  <div class="overlay"></div><!-- /.overlay -->
120
122
 
121
- </div>
123
+ </div>
122
124
 
123
125
  <div class="header-right">
124
126
 
@@ -148,6 +150,12 @@
148
150
 
149
151
  </header><!-- /.header -->
150
152
 
153
+ </body>
154
+
155
+ </html>
156
+
157
+
158
+
151
159
  ```
152
160
 
153
161
  ```CSS

5

修正いたしました

2021/10/20 10:42

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -202,6 +202,20 @@
202
202
 
203
203
 
204
204
 
205
+ @media screen and (max-width: 599px) {
206
+
207
+ .header {
208
+
209
+ padding: 8px 10px;
210
+
211
+ max-height: 60px;
212
+
213
+ }
214
+
215
+ }
216
+
217
+
218
+
205
219
  .header-inner {
206
220
 
207
221
  max-width: 1880px;
@@ -324,9 +338,81 @@
324
338
 
325
339
 
326
340
 
341
+ .header-left .nav .header-list {
342
+
343
+ display: -webkit-box;
344
+
345
+ display: -webkit-flex;
346
+
347
+ display: -ms-flexbox;
348
+
349
+ display: flex;
350
+
351
+ -webkit-box-align: center;
352
+
353
+ -webkit-align-items: center;
354
+
355
+ -ms-flex-align: center;
356
+
357
+ align-items: center;
358
+
359
+ padding-top: 20px;
360
+
361
+ padding-bottom: 20px;
362
+
363
+ }
364
+
365
+
366
+
367
+ .header-left .nav .header-list .header-item {
368
+
369
+ color: #fff;
370
+
371
+ }
372
+
373
+
374
+
375
+ @media screen and (max-width: 599px) {
376
+
377
+ .header-left .nav .header-list .header-item {
378
+
379
+ padding: 20px;
380
+
381
+ font-size: 2rem;
382
+
383
+ }
384
+
385
+ }
386
+
387
+
388
+
389
+ .header-left .nav .header-list .header-item + .header-item {
390
+
391
+ padding-left: 30px;
392
+
393
+ }
394
+
395
+
396
+
397
+ .header-left .nav .header-list .header-item > a {
398
+
399
+ color: #fff;
400
+
401
+ display: inline-block;
402
+
403
+ -webkit-transition: .3s;
404
+
405
+ transition: .3s;
406
+
407
+ /* 0.3秒で拡大までの時間 */
408
+
409
+ }
410
+
411
+
412
+
327
413
  @media screen and (min-width: 600px) and (max-width: 1179px) {
328
414
 
329
- .header-left .nav .drawer-nav_active {
415
+ .header-left .drawer-nav_active {
330
416
 
331
417
  top: 80px;
332
418
 
@@ -354,7 +440,7 @@
354
440
 
355
441
  @media screen and (max-width: 599px) {
356
442
 
357
- .header-left .nav .drawer-nav_active {
443
+ .header-left .drawer-nav_active {
358
444
 
359
445
  top: 60px;
360
446
 
@@ -380,15 +466,109 @@
380
466
 
381
467
 
382
468
 
469
+ .header-left .overlay {
470
+
471
+ content: "";
472
+
473
+ display: block;
474
+
475
+ width: 0;
476
+
477
+ height: 0;
478
+
479
+ background-color: rgba(0, 0, 0, 0.5);
480
+
481
+ position: absolute;
482
+
483
+ top: 0;
484
+
485
+ left: 0;
486
+
487
+ z-index: 2;
488
+
489
+ opacity: 0;
490
+
491
+ -webkit-transition: opacity .5s;
492
+
493
+ transition: opacity .5s;
494
+
495
+ }
496
+
497
+
498
+
499
+ .header-left .overlay._open {
500
+
501
+ width: 100%;
502
+
503
+ height: 100%;
504
+
505
+ opacity: 1;
506
+
507
+ }
508
+
509
+
510
+
511
+ .header-right {
512
+
513
+ margin-left: auto;
514
+
515
+ }
516
+
517
+
518
+
519
+ @media screen and (max-width: 599px) {
520
+
521
+ .header-right {
522
+
523
+ margin-left: 20px;
524
+
525
+ }
526
+
527
+ }
528
+
529
+
530
+
383
- .header-left .nav .header-list {
531
+ .header-right .header-link {
532
+
384
-
533
+ /* height: calc(54/80*100%);
534
+
535
+ background-color: $link-color;
536
+
537
+ border-radius: 3px;
538
+
385
- display: -webkit-box;
539
+ padding: 15px 35px;
386
-
387
- display: -webkit-flex;
540
+
388
-
389
- display: -ms-flexbox;
390
-
391
- display: flex;
541
+ display: flex;
542
+
543
+ justify-content: flex-end;
544
+
545
+ align-items: center; */
546
+
547
+ }
548
+
549
+
550
+
551
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
552
+
553
+ .header-right .header-link {
554
+
555
+ margin-left: auto;
556
+
557
+ }
558
+
559
+ }
560
+
561
+
562
+
563
+ .header-right .header-link .calender-link {
564
+
565
+ display: block;
566
+
567
+ background-color: #978F10;
568
+
569
+ text-decoration: none;
570
+
571
+ font-weight: bold;
392
572
 
393
573
  -webkit-box-align: center;
394
574
 
@@ -398,202 +578,54 @@
398
578
 
399
579
  align-items: center;
400
580
 
401
- padding-top: 20px;
581
+ text-align: center;
402
-
403
- padding-bottom: 20px;
404
-
405
- }
406
-
407
-
408
-
409
- .header-left .nav .header-list .header-item {
410
582
 
411
583
  color: #fff;
412
584
 
585
+ padding: 10px 37px;
586
+
587
+ font-size: 1.6rem;
588
+
589
+ -webkit-transition: .3s;
590
+
591
+ transition: .3s;
592
+
593
+ }
594
+
595
+
596
+
597
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
598
+
599
+ .header-right .header-link .calender-link {
600
+
601
+ margin-right: 100px;
602
+
603
+ }
604
+
413
605
  }
414
606
 
415
607
 
416
608
 
417
609
  @media screen and (max-width: 599px) {
418
610
 
419
- .header-left .nav .header-list .header-item {
611
+ .header-right .header-link .calender-link {
420
-
612
+
421
- padding: 20px;
613
+ padding: 8px 16px;
422
-
614
+
423
- font-size: 2rem;
615
+ font-size: 1.4rem;
424
-
616
+
425
- }
617
+ }
426
-
618
+
427
- }
619
+ }
428
-
429
-
430
-
431
- .header-left .nav .header-list .header-item + .header-item {
620
+
432
-
433
- padding-left: 30px;
621
+
434
-
435
- }
622
+
436
-
437
-
438
-
439
- .header-left .nav .header-list .header-item > a {
623
+ .header-right .header-link .calender-link::before {
440
-
624
+
441
- color: #fff;
625
+ content: "";
442
626
 
443
627
  display: inline-block;
444
628
 
445
- -webkit-transition: .3s;
446
-
447
- transition: .3s;
448
-
449
- /* 0.3秒で拡大までの時間 */
450
-
451
- }
452
-
453
-
454
-
455
- .header-left .overlay {
456
-
457
- content: "";
458
-
459
- display: block;
460
-
461
- width: 0;
462
-
463
- height: 0;
464
-
465
- background-color: rgba(0, 0, 0, 0.5);
466
-
467
- position: absolute;
468
-
469
- top: 0;
470
-
471
- left: 0;
472
-
473
- z-index: 2;
474
-
475
- opacity: 0;
476
-
477
- -webkit-transition: opacity .5s;
478
-
479
- transition: opacity .5s;
480
-
481
- }
482
-
483
-
484
-
485
- .header-left .overlay._open {
486
-
487
- width: 100%;
488
-
489
- height: 100%;
490
-
491
- opacity: 1;
492
-
493
- }
494
-
495
-
496
-
497
- .header-right {
498
-
499
- margin-left: auto;
500
-
501
- }
502
-
503
-
504
-
505
- @media screen and (max-width: 599px) {
506
-
507
- .header-right {
508
-
509
- margin-left: 20px;
510
-
511
- }
512
-
513
- }
514
-
515
-
516
-
517
- .header-right .header-link {}
518
-
519
- @media screen and (min-width: 600px) and (max-width: 1179px) {
520
-
521
- .header-right .header-link {
522
-
523
- margin-left: auto;
524
-
525
- }
526
-
527
- }
528
-
529
-
530
-
531
- .header-right .header-link .calender-link {
532
-
533
- display: block;
534
-
535
- background-color: #978F10;
536
-
537
- text-decoration: none;
538
-
539
- font-weight: bold;
540
-
541
- -webkit-box-align: center;
542
-
543
- -webkit-align-items: center;
544
-
545
- -ms-flex-align: center;
546
-
547
- align-items: center;
548
-
549
- text-align: center;
550
-
551
- color: #fff;
552
-
553
- padding: 10px 37px;
554
-
555
- font-size: 1.6rem;
556
-
557
- -webkit-transition: .3s;
558
-
559
- transition: .3s;
560
-
561
- }
562
-
563
-
564
-
565
- @media screen and (min-width: 600px) and (max-width: 1179px) {
566
-
567
- .header-right .header-link .calender-link {
568
-
569
- margin-right: 100px;
570
-
571
- }
572
-
573
- }
574
-
575
-
576
-
577
- @media screen and (max-width: 599px) {
578
-
579
- .header-right .header-link .calender-link {
580
-
581
- padding: 8px 16px;
582
-
583
- font-size: 1.4rem;
584
-
585
- }
586
-
587
- }
588
-
589
-
590
-
591
- .header-right .header-link .calender-link::before {
592
-
593
- content: "";
594
-
595
- display: inline-block;
596
-
597
629
  margin: -3px 5px 0 0;
598
630
 
599
631
  background: url(../../img/calender.png) no-repeat;
@@ -622,7 +654,9 @@
622
654
 
623
655
  ```js
624
656
 
657
+
658
+
625
- $(".humburger").on('click', function(){
659
+ $(".humburger").on('click', function(){
626
660
 
627
661
  $(this).toggleClass("_open");
628
662
 
@@ -636,7 +670,7 @@
636
670
 
637
671
  $(this).removeClass('_active');
638
672
 
639
- $(".drawer-nav").removeClass('_open');
673
+ $(".drawer-nav").removeClass('_active');
640
674
 
641
675
  $(".line").removeClass('_open');
642
676
 
@@ -646,7 +680,7 @@
646
680
 
647
681
  $(this).addClass('_active');
648
682
 
649
- $('.drawer-nav').addClass('_open');
683
+ $('.drawer-nav').addClass('_active');
650
684
 
651
685
  $('.line').addClass('_open');
652
686
 

4

修正しました

2021/10/20 10:38

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -662,13 +662,13 @@
662
662
 
663
663
  if($(this).hasClass('_open')){
664
664
 
665
- $(this).removeClass('open');
665
+ $(this).removeClass('_open');
666
-
666
+
667
- $('.menu-trigger').removeClass('active');
667
+ $('.menu-trigger').removeClass('_active');
668
-
668
+
669
- $('main').removeClass('open');
669
+ $('main').removeClass('_open');
670
-
670
+
671
- $('nav').removeClass('open');
671
+ $('nav').removeClass('_open');
672
672
 
673
673
  }
674
674
 

3

文言修正しました

2021/10/19 13:31

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -14,6 +14,14 @@
14
14
 
15
15
 
16
16
 
17
+ Googleソース非表示
18
+
19
+ ![Googleソース非表示](9b6961ae000e842f79bcd27196676e1c.jpeg)
20
+
21
+
22
+
23
+
24
+
17
25
  ### 発生している問題・エラーメッセージ
18
26
 
19
27
 

2

修正しました

2021/10/19 10:32

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -614,15 +614,7 @@
614
614
 
615
615
  ```js
616
616
 
617
- $(function(){
618
-
619
- //humburger関数
620
-
621
- // const humburger=$('.humburger')
622
-
623
-
624
-
625
- $(".humburger").on('click', function(){
617
+ $(".humburger").on('click', function(){
626
618
 
627
619
  $(this).toggleClass("_open");
628
620
 
@@ -656,11 +648,11 @@
656
648
 
657
649
  });
658
650
 
659
- //navを戻す
651
+
660
-
652
+
661
- $('.overlay').on('click',function(){
653
+ $('.overlay').on('click',function(){
662
-
654
+
663
- if($(this).hasClass('open')){
655
+ if($(this).hasClass('_open')){
664
656
 
665
657
  $(this).removeClass('open');
666
658
 
@@ -676,8 +668,6 @@
676
668
 
677
669
  });
678
670
 
679
- });
680
-
681
671
  ```
682
672
 
683
673
  ### 補足情報(FW/ツールのバージョンなど)

1

修正いたしました

2021/10/19 09:27

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,10 @@
8
8
 
9
9
 
10
10
 
11
+ ![現状](73361fa80b3fc12a7c155f8d6ca59b0d.jpeg)
12
+
13
+
14
+
11
15
 
12
16
 
13
17
  ### 発生している問題・エラーメッセージ