質問編集履歴
3
コード前の文言を修正しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -188,9 +188,15 @@
|
|
|
188
188
|
|
|
189
189
|
```
|
|
190
190
|
|
|
191
|
-
### 追記__コメント欄記載の現象発生後のコードです（2020'06'09追記）
|
|
191
|
+
### 追記__コメント欄記載の現象【1】【2】発生後の検証コードです（2020'06'09追記）
|
|
192
|
+
|
|
192
|
-
|
|
193
|
+
【現象2】に関しては、メディアクエリ内の/*メニューの中身*/<.menu-container .menu>のdisplayをblockに変更し、画面幅に併せて表示／非表示になりましたが、そうすることにより、レスポンシブ化した際のメニューが表示されたままになります。（当然ですよね・・・・）
|
|
194
|
+
|
|
193
|
-
|
|
195
|
+
そこで、<.menu-container .menu.close>を作成し、透明0／ボタンを押せなくしてjsに当てるといけるかも？と思い、試してみましたが、書き方がよろしくないのか思うようにいきません。
|
|
196
|
+
|
|
197
|
+
コードは以下です。ご検証のほどよろしくお願い申し上げます。
|
|
198
|
+
|
|
199
|
+
|
|
194
200
|
|
|
195
201
|
```html
|
|
196
202
|
|
2
【現象1】書いていただいたコードでバツボタンでメニューは3本線に戻りますが、メニューの中身が出たままになってしまいます 【現象2】ハンバーガーメニューをクリック後、pc版メニューの横並び配列に戻りませ
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
|
|
191
191
|
### 追記__コメント欄記載の現象発生後のコードです（2020'06'09追記）
|
|
192
192
|
|
|
193
|
-
|
|
193
|
+
【現象1】書いていただいたコードでバツボタンでメニューは3本線に戻りますが、メニューの中身が出たままになってしまいます 【現象2】ハンバーガーメニューをクリック後、pc版メニューの横並び配列に戻りませ
|
|
194
194
|
|
|
195
195
|
```html
|
|
196
196
|
|
1
【現象1】書いていただいたコードでバツボタンでメニューは3本線に戻りますが、メニューの中身が出たままになってしまいます 【現象2】ハンバーガーメニューをクリック後、pc版メニューの横並び配列に戻りませ
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -187,3 +187,185 @@
|
|
|
187
187
|
});
|
|
188
188
|
|
|
189
189
|
```
|
|
190
|
+
|
|
191
|
+
### 追記__コメント欄記載の現象発生後のコードです（2020'06'09追記）
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
```html
|
|
196
|
+
|
|
197
|
+
<!DOCTYPE html>
|
|
198
|
+
|
|
199
|
+
<html lang="ja">
|
|
200
|
+
|
|
201
|
+
<head>
|
|
202
|
+
|
|
203
|
+
<meta charset="utf-8">
|
|
204
|
+
|
|
205
|
+
<meta name="viewport" content="width=device-width">
|
|
206
|
+
|
|
207
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
208
|
+
|
|
209
|
+
<title>ハンバーガーメニュー</title>
|
|
210
|
+
|
|
211
|
+
<link rel="stylesheet" href="css/reset.css">
|
|
212
|
+
|
|
213
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
214
|
+
|
|
215
|
+
<style>
|
|
216
|
+
|
|
217
|
+
/*PC版メニューのデザイン*/
|
|
218
|
+
|
|
219
|
+
body { background-color: #e9967a; }
|
|
220
|
+
|
|
221
|
+
.menu-container { margin: 0; }
|
|
222
|
+
|
|
223
|
+
.menu-container .menu { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
|
|
224
|
+
|
|
225
|
+
.menu-container .menu .menu-item { flex: 1; }
|
|
226
|
+
|
|
227
|
+
.menu-container .menu .menu-item a { border-right: 1px solid #ccc; color: #333; display: block; padding: 0.6em 0.4em; text-align: center; text-decoration: none; }
|
|
228
|
+
|
|
229
|
+
.menu-container .menu .menu-item a:hover { background: #ccc; color: #ffffff; }
|
|
230
|
+
|
|
231
|
+
.menu-container .menu .menu-item:last-child a { border-right: none; }
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
@media screen and (max-width: 768px) {
|
|
238
|
+
|
|
239
|
+
/*ハンバーガーアイコン*/
|
|
240
|
+
|
|
241
|
+
.btn-trigger { position: relative; border: 1px solid #ccc; width: 50px; height: 50px; cursor: pointer; margin: 10px 0 0 10px; z-index: 10; }
|
|
242
|
+
|
|
243
|
+
.btn-trigger span { position: absolute; width: 30px; height: 2px; background-color: #ccc; border-radius: 4px; cursor: pointer; left: 18%; }
|
|
244
|
+
|
|
245
|
+
.btn-trigger, .btn-trigger span { display: inline-block; transition: all .5s; box-sizing: border-box }
|
|
246
|
+
|
|
247
|
+
.btn-trigger span:nth-of-type(1) { top: 28%; }
|
|
248
|
+
|
|
249
|
+
.btn-trigger span:nth-of-type(2) { top: 50%; }
|
|
250
|
+
|
|
251
|
+
.btn-trigger span:nth-of-type(3) { bottom: 25%; }
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
/*閉じるアイコン*/
|
|
256
|
+
|
|
257
|
+
.btn-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); }
|
|
258
|
+
|
|
259
|
+
.btn-trigger.active span:nth-of-type(2) { opacity: 0; }
|
|
260
|
+
|
|
261
|
+
.btn-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
/*メニューの中身*/
|
|
266
|
+
|
|
267
|
+
.menu-container .menu { -webkit-transform: translate(-50%, -50%); display: block;/*noneから変更してみました*/ height: auto; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 100; }
|
|
268
|
+
|
|
269
|
+
.menu-container .menu .menu-item a { color:#fff; border-right: none; }
|
|
270
|
+
|
|
271
|
+
.menu-container .menu .menu-item a:hover { background: none; color: #ccc; }
|
|
272
|
+
|
|
273
|
+
.menu-container .menu .menu-item:last-child a { border-bottom: none; }
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
/*オーバーレイ →こちらに移動しました*/
|
|
278
|
+
|
|
279
|
+
.modal-overlay { background-color: rgba(0, 0, 0, 0.6); display: none; height: 120%; left: 0; position: fixed; top: 0; width: 100%; }
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
.menu-container .menu.close { opacity: 0; visibility: hidden; } /*追記してみました*/
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
</style>
|
|
290
|
+
|
|
291
|
+
<script>
|
|
292
|
+
|
|
293
|
+
$(function(){
|
|
294
|
+
|
|
295
|
+
$('.btn-trigger').on('click', function() {
|
|
296
|
+
|
|
297
|
+
if ($('header').hasClass('modal-overlay') == false) {
|
|
298
|
+
|
|
299
|
+
$('header').addClass('modal-overlay');
|
|
300
|
+
|
|
301
|
+
$('header').fadeIn('1500');
|
|
302
|
+
|
|
303
|
+
$('.menu-container .menu').fadeIn('1500');
|
|
304
|
+
|
|
305
|
+
$(this).toggleClass('active');
|
|
306
|
+
|
|
307
|
+
} else {
|
|
308
|
+
|
|
309
|
+
$('header').removeClass('modal-overlay');
|
|
310
|
+
|
|
311
|
+
$(this).toggleClass('active');
|
|
312
|
+
|
|
313
|
+
$(this).toggleClass('.menu-container .menu.close'); /*追記してみました*/
|
|
314
|
+
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
});
|
|
318
|
+
|
|
319
|
+
});
|
|
320
|
+
|
|
321
|
+
</script>
|
|
322
|
+
|
|
323
|
+
</head>
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
<body>
|
|
328
|
+
|
|
329
|
+
<header>
|
|
330
|
+
|
|
331
|
+
<div class="icon-hamburger"><span></span></div>
|
|
332
|
+
|
|
333
|
+
<div class="btn-trigger" id="btn02">
|
|
334
|
+
|
|
335
|
+
<span></span>
|
|
336
|
+
|
|
337
|
+
<span></span>
|
|
338
|
+
|
|
339
|
+
<span></span>
|
|
340
|
+
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
<nav class="menu-container">
|
|
346
|
+
|
|
347
|
+
<ul class="menu">
|
|
348
|
+
|
|
349
|
+
<li class="menu-item"><a href="#">ホーム</a></li>
|
|
350
|
+
|
|
351
|
+
<li class="menu-item"><a href="#">ページ A</a></li>
|
|
352
|
+
|
|
353
|
+
<li class="menu-item"><a href="#">ページ B</a></li>
|
|
354
|
+
|
|
355
|
+
<li class="menu-item"><a href="#">ページ C</a></li>
|
|
356
|
+
|
|
357
|
+
<li class="menu-item"><a href="#">ページ D</a></li>
|
|
358
|
+
|
|
359
|
+
<li class="menu-item"><a href="#">ページ E</a></li>
|
|
360
|
+
|
|
361
|
+
</ul>
|
|
362
|
+
|
|
363
|
+
</nav>
|
|
364
|
+
|
|
365
|
+
</header>
|
|
366
|
+
|
|
367
|
+
</body>
|
|
368
|
+
|
|
369
|
+
</html>
|
|
370
|
+
|
|
371
|
+
```
|