クリックした時に形が可変するメニューアイコンを作成したい

プログラミング初学者の者です。
CSS　でハンバーガーメニューのメニューアイコンを作成中です。
クリックした際にアイコンの形が可変するメニューアイコンを作成したいのですが、
クリックをしても反応が無く、原因も分からない為、何卒ご教授頂きたいです。

クリックをしても可変しない　（activeが反応していない）

参考サイトリンク

[CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10]
(nxworld.net/tips/10-css-hamburger-menu-icon-design-and-effect.html)

・上記URLのサイトに記載されている、
『 1. 中央ラインがサークルに変形』のコードを参考にしました。

エラーメッセージ
使用しているVS Code, デベロッパーツールどちらも
エラーメッセージは出ていません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang = "ja">
3  <head>
4    <title>TITLE</title>
5    <meta charset="utf-8">
6    <link rel = "stylesheet" href = "CSS/styles.css">
7
8    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap" rel="stylesheet">
9
10    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
11
12    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
13  </head>
14  <body>
15
16    <header>
17      <div class = "header-left">
18        <h2>TITLE</h2>
19      </div>
20
21
22        <!-- 該当する箇所 ↓ -->
23
24      <div class = "header-right">
25        <a class="menu-trigger" href="#">
26          <span></span>
27          <span></span>
28          <span></span>
29        </a>
30      </div>
31
32      <!-- ここまで -->
33
34
35    </header>
36    <main>
37          //swiper.jsを使用//
38      <div class = "swiper-container">
39        <div class = "swiper-wrapper">
40          <div class = "swiper-slide" style="background-image: url(picture/image_file_1573622277.jpeg);">
41            <p>NAME</p>
42            <a href = "#">READ MORE</a>
43          </div>
44          <div class = "swiper-slide" style="background-image: url(picture/image_file_1573622288.jpeg);">
45            <p>NAME</p>
46            <a href = "#">CHECK IT</a>
47          </div>
48          <div class = "swiper-slide" style="background-image: url(picture/image_file_1573622389.jpeg);">
49            <p>NAME</p>
50            <a href = "#">ABOUT</a>
51          </div>
52        </div>
53
54        <aside>
55          <div class = "aside-icon">
56            <a href = "#"><i class="fab fa-twitter"></i></a>
57            <a href = "#"><i class="fab fa-instagram-square"></i></a>
58            <a href = "#"><i class="fab fa-facebook-square"></i></a>
59          </div>
60        </aside>
61
62      </div>
63    </main>
64
65    </div>
66    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
67    <script src = "JS/chenge_image.js"></script>
68  </body>
69</html>

CSS
1
2    //※SCSSも使用しています//
3
4* {
5  box-sizing: border-box; }
6
7body {
8  padding: 0;
9  margin: 0; }
10
11header {
12  width: 100%;
13  height: 100px;
14  padding: 20px 20px;
15  position: fixed;
16  top: 0;
17  z-index: 10;
18  display: flex;
19  justify-content: space-between; }
20
21.header-left h2 {
22  color: white;
23  margin: 0;
24  padding-top: 7px; }
25
26
27   //該当する箇所　↓//
28
29.menu-trigger, .menu-trigger span {
30  display: inline-block;
31  transition: all .4s;
32  box-sizing: border-box; }
33
34.menu-trigger {
35  position: relative;
36  width: 30px;
37  height: 30px; }
38
39.menu-trigger span {
40  position: absolute;
41  left: 0;
42  width: 100%;
43  height: 2px;
44  background-color: white;
45  border-radius: 2px; }
46
47.menu-trigger span:nth-of-type(1) {
48  top: 0; }
49
50.menu-trigger span:nth-of-type(2) {
51  top: 50%;
52  left: 50%;
53  -webkit-transform: translate3d(-50%, -50%, 0);
54  transform: translate3d(-50%, -50%, 0); }
55
56.menu-trigger span:nth-of-type(3) {
57  bottom: 0; }
58
59.menu-trigger.active span:nth-of-type(1) {
60  -webkit-transform: translateY(20px) rotate(-315deg) scale(0.8);
61  transform: translateY(20px) rotate(-315deg) scale(0.8); }
62
63.menu-trigger.active span:nth-of-type(2) {
64  width: 60px;
65  height: 60px;
66  background-color: transparent;
67  border: 3px solid #fff;
68  border-radius: 50%; }
69
70.menu-trigger.active span:nth-of-type(3) {
71  -webkit-transform: translateY(-20px) rotate(315deg) scale(0.8);
72  transform: translateY(-20px) rotate(315deg) scale(0.8); }
73
74  //ここまで//
75
76
77
78@keyframes fade-in {
79  from {
80    opacity: 0;
81    transform: translateY(100px); }
82  to {
83    opacity: 1;
84    transform: translateY(0); } }
85
86.swiper-container {
87  width: 100%;
88  height: 100vh; }
89
90  .swiper-container .swiper-wrapper .swiper-slide {
91    background-repeat: no-repeat;
92    background-size: cover;
93    background-position: center; }
94
95    .swiper-container .swiper-wrapper .swiper-slide p {
96      position: absolute;
97      top: 40%;
98      left: 10%;
99      color: white;
100      font-family: 'Josefin Sans', sans-serif;
101      font-size: 30px;
102      font-weight: bold; }
103
104    .swiper-container .swiper-wrapper .swiper-slide a {
105      position: absolute;
106      top: 55%;
107      left: 10%;
108      color: white;
109      font-family: 'Josefin Sans', sans-serif;
110      font-size: 18px;
111      font-weight: bold;
112      text-decoration: none;
113      display: inline-block;
114      padding: 10px 17px;
115      border: 1px solid white; }
116
117  .swiper-container .swiper-wrapper .swiper-slide-active p {
118    animation-name: fade-in;
119    animation-duration: 2s;
120    animation-delay: 2s;
121    animation-fill-mode: both; }
122
123  .swiper-container .swiper-wrapper .swiper-slide-active a {
124    animation-name: fade-in;
125    animation-duration: 2.5s;
126    animation-delay: 2.5s;
127    animation-fill-mode: both; }
128  .swiper-container aside {
129    margin-top: 60px;
130    height: 300px;
131    position: absolute;
132    top: 20%;
133    right: 0;
134    z-index: 10; }
135
136    .swiper-container aside .aside-icon {
137      display: grid;
138      gap: 100px; }
139
140      .swiper-container aside .aside-icon i {
141        padding-right: 20px;
142        display: inline-block;
143        color: white;
144        font-size: 30px;
145        transition: all 0.3s;
146        right: 0; }
147
148      .swiper-container aside .aside-icon i:hover {
149        color: red;
150        position: relative;
151        right: 10px; }

Javascript
1'use-strict'
2
3let mySwiper = new Swiper (".swiper-container", {
4
5  // スライドショーの処理
6  loop: true,
7  effect: 'slide',
8  autoplay: {
9    delay: 4000,
10  },
11
12  speed: 2000,
13});

完成形

背景画像は　swiper.js, 左の文字はCSSアニメーションで動きます。

試したこと

:active, :focus, :focus-within, :hover
を試したところ、これらは全て反応しましたが、
.activeが反応しません。

補足情報（FW/ツールのバージョンなど）

VS CODE version 1.49.0

使用PC MAC BOOK AIR

Google chrome　最新

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

回答1件

ベストアンサー

:active, :focus, :focus-within, :hover

を試したところ、これらは全て反応しましたが、
.activeが反応しません。

JavaScript か jQuery でクラスに active を追加/削除してください。

リンク先の最後の DEMO（CodePen）ではjQuery で追加/削除してます。

JavaScriptの場合のコード例

js
1const test = document.querySelector(".menu-trigger");
2test.addEventListener('click', () => {
3  test.classList.toggle('active');
4});
5

投稿2020/09/17 12:00

編集2020/09/17 12:28

hatena19

総合スコア34075

TAIKI_WKBYS

2020/09/17 13:05

ご回答誠に有難う御座います。ご教授頂いたコードを追加したところ、無事解決致しました！大変助かりました。まだまだ知識不足ですが、また機会が御座いましたら宜しくお願い致します。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

クリックした時に形が可変するメニューアイコンを作成したい