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

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

新規登録して質問してみよう
ただいま回答率
85.44%

Q&A

解決済

1回答

683閲覧

ハンバーガーメニューを作りたいのですが、一部のjQueryしか動きません。

iceforest

総合スコア15

0グッド

0クリップ

投稿2023/03/18 09:52

編集2023/03/18 10:21

実現したいこと

メニューボタンを押すとすべてのJQueryが動くようにしたい。
検証で見たときの、is-activeの部分のCSSをしっかり反映させたいです。

ハンガーガーの✕ボタンの動きだけは反映されています。

is-activeを使わないで簡単なjQueryを書いた場合は反映されました。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>Document</title> 9</head> 10<body> 11 <header> 12 <div class="head-container"> 13 <div class="logo"><img src="1\logo.svg" alt=""></div> 14 <div class="menu"><span></span><span></span><span></span></div> 15 16 </div> 17 <nav class="menu-in"> 18 <ul> 19 <li>PICK UP</li> 20 <li>FEATURE</li> 21 <li>CONTACT</li> 22 </ul> 23 <ul> 24 <li>Twitter</li> 25 <li>facebook</li> 26 <li>instagram</li> 27 28 </ul> 29 </nav> 30 <div id="mask"></div> 31 </header> 32 33 34 35 36 37 38 <script 39 src="https://code.jquery.com/jquery-3.6.4.min.js" 40 integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" 41 crossorigin="anonymous"></script> 42 <script src="main.js"></script> 43</body> 44</html>

CSS

1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7header { 8 width: 100%; 9 padding: 20px 40px; 10 margin: 0 auto; 11 position: relative; 12 position: fixed; 13 z-index: 100; 14} 15 16.head-container { 17 display: flex; 18 justify-content: space-between; 19 align-items: center; 20 21} 22 23.menu { 24 width: 50px; 25 height: 50px; 26 position: relative; 27} 28 29.menu span { 30 position: absolute; 31 top: 0; 32 left: 0; 33 display: block; 34 border: solid 1px black; 35 width: 50%; 36 37 38} 39 40 41span:nth-child(1){ 42 transform: rotate(0deg); 43 top: 20px; 44 transition: 0.5s; 45} 46span:nth-child(2){ 47 top: 30px; 48} 49span:nth-child(3){ 50 transform: rotate(0deg); 51 top: 40px; 52 transition: 0.5s; 53} 54 55.is-active span:nth-child(1){ 56 transform: rotate(315deg); 57 top:50%; 58 left: 0; 59 color: white; 60 transition: 0.5s; 61} 62.is-active span:nth-child(2){ 63 opacity: 0; 64} 65.is-active span:nth-child(3){ 66 transform: rotate(-315deg); 67 top:50%; 68 left: 0; 69 color: white; 70 transition: 0.5s; 71} 72 73.menu-in { 74 75 display: block; 76 position: absolute; 77 top: 0; 78 left: -200px; 79 width: 200px; 80 z-index: 3; 81 82} 83 84.is-active .menu-in { 85 position: absolute; 86 left: 200px; 87 width: 200px; 88 height: 100%; 89 background-color: black; 90 91 92 93} 94 95#mask { 96 display: none; 97 transition: all 0.5s; 98} 99 100.is-active #mask { 101 display: block; 102 position: fixed; 103 width: 100%; 104 height: 100%; 105 background-color: black; 106 opacity: 0.8; 107} 108 109video { 110 padding: 80px 0 0 0 ; 111 z-index: 1; 112}

jQuery

1$('.menu').click(function(){ 2 $('.menu').toggleClass('is-active'); 3 $('.menu span').toggleClass('is-active'); 4 $('.menu-in').toggleClass('is-active'); 5 $('#mask').toggleClass('is-active'); 6}); 7

試したこと

h1タグをfadeOutで消してみて、jQueryが動作していることを確認しました。
CDNなので、インターネットが切れていないかを確認しました。
検証のコンソールで、エラーが出ていないことを確認しました。
過去24時間のキャッシュを削除しました。

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

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

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

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

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

m.ts10806

2023/03/18 10:11

ブラウザのデベロッパツールでそのクラスが適用されているかどうか確認してみてください。
iceforest

2023/03/18 10:19

返信ありがとうございます。 やはり、一部以外は最初のコードから変更なしです。 is-activeがhtmlには、全てつくのですが、✕ボタン部分以外にはCSSにはつきません。
iceforest

2023/03/18 10:22

過去24時間のキャッシュを削除しましたが変化なしです。
iceforest

2023/03/18 12:04

CSSにis-activeが反映されていないので、jQueryで変化させられません。 ご経験のある方教えていただけないでしょうか。
guest

回答1

0

ベストアンサー

.is-active .menu-in

このセレクタですと、 is-active クラスの中のいずれかのタグに menu-in クラスがある、という意味になります。同一要素のクラスを表現する場合、スペースを空けてはいけません。

.menu-in.is-active #mask.is-active

といったセレクタを使うのが良いかと思います。

投稿2023/03/19 00:02

Eggpan

総合スコア2932

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

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

iceforest

2023/03/19 02:57

ご回答ありがとうございます。 おかげでjQueryが動きました。 とてもうれしいです。 あとの細かいところは、自分で頑張ってみます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問