teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ハンバーガメニューの✖印を隠れずに、表示させたい

編集履歴

質問編集履歴

2

humberger.css,修正しました,SCSS、画像追記しました

2021/09/27 00:37

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -26,6 +26,16 @@
26
26
 
27
27
 
28
28
 
29
+ 追記
30
+
31
+ ![ハンバーガメニュー1](aa7c6b2fef7f6d2006f075012bb9ce2a.png)
32
+
33
+
34
+
35
+ ![ハンバーガメニュー2](0ed9c90bc371cc3cb4c8e4e7cea9caab.png)
36
+
37
+
38
+
29
39
 
30
40
 
31
41
  ### 試したこと
@@ -444,7 +454,7 @@
444
454
 
445
455
  height: 1px;
446
456
 
447
- width: 60%;
457
+ width: 50px;
448
458
 
449
459
  background-color: #333;
450
460
 
@@ -452,86 +462,240 @@
452
462
 
453
463
  top: 50%;
454
464
 
455
- left: 50%;
456
-
457
- -webkit-transform: translate(-50%, -50%);
458
-
459
- transform: translate(-50%, -50%);
465
+ left: calc(50% - 25px);
466
+
467
+ /* 左右中央 */
460
468
 
461
469
  -webkit-transition: .3s;
462
470
 
463
471
  transition: .3s;
464
472
 
473
+ -webkit-transform-origin: center;
474
+
475
+ transform-origin: center;
476
+
477
+ /* 回転の軸を中央にする */
478
+
465
479
  }
466
480
 
467
481
  .humburger .line:first-child {
468
482
 
483
+ top: calc(50% + 5px);
484
+
485
+ }
486
+
487
+ .humburger .line:nth-child(2) {
488
+
489
+ top: calc(50% + 10px);
490
+
491
+ bottom: 0;
492
+
493
+ margin: auto;
494
+
495
+ }
496
+
497
+ .humburger .line:last-child {
498
+
499
+ top: calc(50% + 15px);
500
+
501
+ }
502
+
503
+ .humburger .line._open:first-child {
504
+
469
505
  display: block;
470
506
 
471
- -webkit-transform: translate(-50%, -15px);
507
+ -webkit-transform: rotate(-45deg);
472
-
508
+
473
- transform: translate(-50%, -15px);
509
+ transform: rotate(-45deg);
510
+
474
-
511
+ color: #000;
512
+
475
- }
513
+ }
476
-
514
+
477
- .humburger .line:nth-child(2) {
515
+ .humburger .line._open:nth-child(2)._open {
516
+
478
-
517
+ opacity: 0;
518
+
519
+ }
520
+
521
+ .humburger .line._open:last-child {
522
+
523
+ -webkit-transform: rotate(45deg);
524
+
525
+ transform: rotate(45deg);
526
+
527
+ top: 50%;
528
+
529
+ color: #000;
530
+
531
+ }
532
+
533
+ }
534
+
535
+ ```
536
+
537
+
538
+
539
+ ```SCSS
540
+
541
+
542
+
543
+ .humburger{
544
+
545
+
546
+
547
+ @include mt{
548
+
549
+ display: block;
550
+
551
+ height: 80px;
552
+
553
+ width: 80px;
554
+
555
+ position: fixed;
556
+
557
+ top: 0%;
558
+
559
+ right: 20px;
560
+
561
+ /* /* position: fixed;
562
+
563
+ right: 20px;
564
+
565
+ z-index: 3; */
566
+
479
- /* top: 0;
567
+ /* width: 5%;
568
+
569
+ height: 5%; */
570
+
571
+ // border-radius: 50%;
572
+
573
+ /* border: 1px solid #333;
574
+
575
+ box-shadow: 0 0 2rem transparent; */
576
+
577
+ z-index: 99;
578
+
579
+ &._open{
580
+
581
+ right: 20px;
582
+
583
+ }
584
+
585
+
586
+
587
+ @include mt{
588
+
589
+ .line {
590
+
591
+ display: block;
592
+
593
+ height: 1px;
594
+
595
+ width: 50px;
596
+
597
+ background-color: #333;
598
+
599
+ position: absolute;
600
+
601
+ top: 50%;
602
+
603
+ left: calc(50% - 25px); /* 左右中央 */
604
+
605
+ //transform: translate(-50%,-50%);
606
+
607
+ transition: .3s;
608
+
609
+ transform-origin: center; /* 回転の軸を中央にする */
610
+
611
+
612
+
613
+ &:first-child {
614
+
615
+ top: calc(50% + 5px);
616
+
617
+ }
618
+
619
+ &:nth-child(2) {
620
+
621
+ top: calc(50% + 10px);
480
622
 
481
623
  bottom: 0;
482
624
 
483
- margin: auto; */
484
-
485
- }
486
-
487
- .humburger .line:last-child {
488
-
489
- -webkit-transform: translate(-50%, 15px);
490
-
491
- transform: translate(-50%, 15px);
492
-
493
- }
494
-
495
- .humburger .line._open:first-child {
496
-
497
- display: block;
498
-
499
- -webkit-transform: rotate(45deg) translate(-50%, -15px);
500
-
501
- transform: rotate(45deg) translate(-50%, -15px);
502
-
503
- -webkit-transform-origin: left;
504
-
505
- transform-origin: left;
506
-
507
- color: #000;
508
-
509
- }
510
-
511
- .humburger .line._open:nth-child(2)._open {
512
-
513
- opacity: 0;
514
-
515
- }
516
-
517
- .humburger .line._open:last-child {
518
-
519
- -webkit-transform: rotate(-45deg) translate(-50%, 15px);
520
-
521
- transform: rotate(-45deg) translate(-50%, 15px);
522
-
523
- -webkit-transform-origin: left;
524
-
525
- transform-origin: left;
526
-
527
- color: #000;
528
-
529
- }
530
-
531
- }
625
+ margin: auto;
626
+
627
+ }
628
+
629
+ &:last-child {
630
+
631
+
632
+
633
+ top: calc(50% + 15px);
634
+
635
+ }
636
+
637
+ //js-open
638
+
639
+ &._open{
640
+
641
+ &:first-child {
642
+
643
+ display: block;
644
+
645
+ transform: rotate(-45deg) ;
646
+
647
+ // transform-origin: left;
648
+
649
+ color: #000;
650
+
651
+
652
+
653
+
654
+
655
+ }
656
+
657
+ &:nth-child(2){
658
+
659
+ &._open{
660
+
661
+ opacity: 0;
662
+
663
+ }
664
+
665
+ }
666
+
667
+
668
+
669
+ &:last-child {
670
+
671
+ transform: rotate(45deg) ;
672
+
673
+ top: 50%;
674
+
675
+ // transform-origin: left;
676
+
677
+ color: #000;
678
+
679
+ }
680
+
681
+ }
682
+
683
+ }
684
+
685
+ }
686
+
687
+ }
688
+
689
+ }
690
+
691
+
692
+
693
+
532
694
 
533
695
  ```
534
696
 
697
+
698
+
535
699
  ```js
536
700
 
537
701
  /* humberger */

1

追記しました

2021/09/27 00:36

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -532,6 +532,38 @@
532
532
 
533
533
  ```
534
534
 
535
+ ```js
536
+
537
+ /* humberger */
538
+
539
+ $(function(){
540
+
541
+ $("#js-humburger","body", ".nav").on('click', function(){
542
+
543
+
544
+
545
+ $(this).toggleClass("_open");
546
+
547
+ $(".nav, .line").toggleClass("_open");
548
+
549
+ $(".header-list, .header-item, .header-item a").toggleClass("_active");
550
+
551
+ $("body").toggleClass("noscroll");
552
+
553
+ $(".this").fadeToggle(300);
554
+
555
+
556
+
557
+ });
558
+
559
+
560
+
561
+ });
562
+
563
+ ```
564
+
565
+
566
+
535
567
 
536
568
 
537
569