回答編集履歴
2
なんか.navがふたつありました。すまん！！！
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
`.nav`に`open`がついている前提での記述をしたい場合、`.nav`直下に記述するのが丸そうです。
|
|
9
|
+
`.nav`に`.open`がついている前提での記述をしたい場合、`.nav`直下に記述するのが丸そうです。
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
@@ -14,8 +14,6 @@
|
|
|
14
14
|
|
|
15
15
|
.nav {
|
|
16
16
|
|
|
17
|
-
.nav {
|
|
18
|
-
|
|
19
17
|
background-color: #fff;
|
|
20
18
|
|
|
21
19
|
width: 240px;
|
|
@@ -194,7 +192,9 @@
|
|
|
194
192
|
|
|
195
193
|
}
|
|
196
194
|
|
|
195
|
+
&.open {
|
|
196
|
+
|
|
197
|
-
|
|
197
|
+
.hamburger .bar {
|
|
198
198
|
|
|
199
199
|
background-color: transparent;
|
|
200
200
|
|
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
|
|
203
203
|
top: 0;
|
|
204
204
|
|
|
205
|
-
transform: rotate(45deg);
|
|
205
|
+
transform: rotate(45deg); //効かない
|
|
206
206
|
|
|
207
207
|
}
|
|
208
208
|
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
|
|
211
211
|
top: 0;
|
|
212
212
|
|
|
213
|
-
transform: rotate(-45deg);
|
|
213
|
+
transform: rotate(-45deg); //効かない
|
|
214
214
|
|
|
215
215
|
}
|
|
216
216
|
|
1
.openでわざわざ囲む必要はねーだろ！！
test
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
現在記述している`.open &`では`.open .nav .hamburger .bar::after`という感じになってしまいます。
|
|
4
4
|
|
|
5
|
-
`nav`の上に`.open`とクラスのついた親要素がないと起動しないようになってますね。
|
|
5
|
+
`.nav`の上に`.open`とクラスのついた親要素がないと起動しないようになってますね。
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
-
`nav`に`open`がついている前提での記述をしたい場合、`.nav`直下に記述するのが丸そうです。
|
|
9
|
+
`.nav`に`open`がついている前提での記述をしたい場合、`.nav`直下に記述するのが丸そうです。
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
@@ -194,9 +194,7 @@
|
|
|
194
194
|
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
-
&.open {
|
|
198
|
-
|
|
199
|
-
|
|
197
|
+
&.open .hamburger .bar {
|
|
200
198
|
|
|
201
199
|
background-color: transparent;
|
|
202
200
|
|