teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

修正

2021/12/02 23:46

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -8,10 +8,14 @@
8
8
  ```
9
9
  下記のように修正します。
10
10
  ```css
11
- .hamburger.active ~ nav.globalMenuSp {
11
+ .hamburger.active + nav.globalMenuSp {
12
12
  transform: translateX(0%);
13
13
  }
14
14
  ```
15
+
16
+ `+`はすぐ後の要素を指定します。
17
+ [隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_combinator)
18
+
15
19
  これで、ハンバーガーメニューのみのactiveクラスの付け外しで動作するようになるので、jQueryがシンプルになります。
16
20
 
17
21
  その上で、ナビのa要素のクリックでも反応するようにjQueryを書き換えればいいでしょう。