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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1215閲覧

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

TAIKI_WKBYS

総合スコア1

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/17 11:25

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

プログラミング初学者の者です。
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 最新

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

: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

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TAIKI_WKBYS

2020/09/17 13:05

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問