質問編集履歴
7
説明文をわかりやすくしました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -266,6 +266,18 @@
|
|
|
266
266
|
|
|
267
267
|
|
|
268
268
|
|
|
269
|
+
ためしにオーバーレイの動きを止め、
|
|
270
|
+
|
|
271
|
+
ハンバーガーボタン単独で動かす場合は、
|
|
272
|
+
|
|
273
|
+
×の棒の間を押しても、×はきちんと横棒三本に戻ります。
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
つまりオーバーレイと一緒に使ったときだけ
|
|
278
|
+
|
|
279
|
+
きちんと作動しないのです
|
|
280
|
+
|
|
269
281
|
なぜこうなったのかよくわかりません。
|
|
270
282
|
|
|
271
283
|
|
6
説明文をわかりやすくしました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -260,9 +260,7 @@
|
|
|
260
260
|
|
|
261
261
|
|
|
262
262
|
|
|
263
|
-
予定では、×の棒の間もハンバーガーボタン（.nav-btn）のボックスの範囲内のはずなので、
|
|
264
|
-
|
|
265
|
-
×の棒の間をクリック
|
|
263
|
+
予定では、×の棒の間をクリックしても×の形は横棒三本に戻り、
|
|
266
264
|
|
|
267
265
|
オーバーレイも解除されるはずでした。
|
|
268
266
|
|
5
説明文をわかりやすくしました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -260,7 +260,9 @@
|
|
|
260
260
|
|
|
261
261
|
|
|
262
262
|
|
|
263
|
+
予定では、×の棒の間もハンバーガーボタン（.nav-btn）のボックスの範囲内のはずなので、
|
|
264
|
+
|
|
263
|
-
|
|
265
|
+
×の棒の間をクリックすれば×の形は横棒三本に戻り、
|
|
264
266
|
|
|
265
267
|
オーバーレイも解除されるはずでした。
|
|
266
268
|
|
4
説明文をわかりやすくしました
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
3
コードをわかりやすくしました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -198,8 +198,6 @@
|
|
|
198
198
|
|
|
199
199
|
.open .nav-btn {
|
|
200
200
|
|
|
201
|
-
color: #fff;
|
|
202
|
-
|
|
203
201
|
z-index: 1000;
|
|
204
202
|
|
|
205
203
|
}
|
2
説明文をわかりやすくしました
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
ハンバーガーボタンをクリックすると全画面オーバーレイが発生する
|
|
1
|
+
ハンバーガーボタンをクリックすると全画面オーバーレイが発生するサイトを作ったのだが、オーバーレイ発生後のハンバーガーボタンが押しにくい
|
test
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
HTML、CSS、jQueryを使って、
|
|
2
2
|
|
|
3
|
-
ハンバーガーボタンをクリックすると全画面オーバーレイが発生する
|
|
3
|
+
ハンバーガーボタンをクリックすると全画面オーバーレイが発生するサイトを作りました。
|
|
4
|
-
|
|
4
|
+
|
|
5
|
-
ハンバーガーボタンをクリックすると三本の横棒が×に変化する仕様にしています。
|
|
5
|
+
同時にハンバーガーボタンをクリックすると三本の横棒が×に変化する仕様にしています。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
1
コードの間違いを修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
|
|
209
209
|
.open .nav-btn::before {
|
|
210
210
|
|
|
211
|
-
transform: translateY(
|
|
211
|
+
transform: translateY(2px) rotate(45deg); /* 上の棒の処理 */
|
|
212
212
|
|
|
213
213
|
box-shadow: none; /* 真ん中の棒の処理 */
|
|
214
214
|
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
|
|
219
219
|
.open .nav-btn::after {
|
|
220
220
|
|
|
221
|
-
transform: translateY(-
|
|
221
|
+
transform: translateY(-2px) rotate(-45deg); /* 下の棒の処理 */
|
|
222
222
|
|
|
223
223
|
}
|
|
224
224
|
|