質問編集履歴
3
css
test
CHANGED
File without changes
|
test
CHANGED
File without changes
|
2
css
test
CHANGED
File without changes
|
test
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
現在下記の様なヘッダーを作成しています。
|
2
2
|
|
3
|
-
https://jsfiddle.net/v0tqd2v1/?utm_source=website&utm_medium=embed&utm_campaign=v0tqd2v1
|
3
|
+
https://jsfiddle.net/v0tqd2v1/3/?utm_source=website&utm_medium=embed&utm_campaign=v0tqd2v1
|
4
4
|
|
5
5
|
```html
|
6
6
|
|
@@ -186,7 +186,7 @@
|
|
186
186
|
|
187
187
|
|
188
188
|
|
189
|
-
.menu > ul
|
189
|
+
.menu > ul {
|
190
190
|
|
191
191
|
margin: 0 auto;
|
192
192
|
|
@@ -212,9 +212,9 @@
|
|
212
212
|
|
213
213
|
|
214
214
|
|
215
|
-
.menu > ul
|
215
|
+
.menu > ul:before,
|
216
|
-
|
216
|
+
|
217
|
-
.menu > ul
|
217
|
+
.menu > ul:after {
|
218
218
|
|
219
219
|
content: "";
|
220
220
|
|
@@ -224,7 +224,7 @@
|
|
224
224
|
|
225
225
|
|
226
226
|
|
227
|
-
.menu > ul
|
227
|
+
.menu > ul:after {
|
228
228
|
|
229
229
|
clear: both;
|
230
230
|
|
@@ -232,7 +232,7 @@
|
|
232
232
|
|
233
233
|
|
234
234
|
|
235
|
-
.menu > ul
|
235
|
+
.menu > ul > li {
|
236
236
|
|
237
237
|
display: inline-block;
|
238
238
|
|
@@ -246,7 +246,7 @@
|
|
246
246
|
|
247
247
|
|
248
248
|
|
249
|
-
.menu > ul
|
249
|
+
.menu > ul > li a {
|
250
250
|
|
251
251
|
text-decoration: none;
|
252
252
|
|
@@ -258,7 +258,7 @@
|
|
258
258
|
|
259
259
|
|
260
260
|
|
261
|
-
.menu > ul
|
261
|
+
.menu > ul > li:hover {
|
262
262
|
|
263
263
|
background: #f0f0f0;
|
264
264
|
|
@@ -268,7 +268,7 @@
|
|
268
268
|
|
269
269
|
|
270
270
|
|
271
|
-
.menu > ul
|
271
|
+
.menu > ul > li > ul {
|
272
272
|
|
273
273
|
display: none;
|
274
274
|
|
@@ -298,9 +298,9 @@
|
|
298
298
|
|
299
299
|
|
300
300
|
|
301
|
-
.menu > ul
|
301
|
+
.menu > ul > li > ul:before,
|
302
|
-
|
302
|
+
|
303
|
-
.menu > ul
|
303
|
+
.menu > ul> li > ul:after {
|
304
304
|
|
305
305
|
content: "";
|
306
306
|
|
@@ -310,7 +310,7 @@
|
|
310
310
|
|
311
311
|
|
312
312
|
|
313
|
-
.menu > ul
|
313
|
+
.menu > ul > li > ul:after {
|
314
314
|
|
315
315
|
clear: both;
|
316
316
|
|
@@ -318,7 +318,7 @@
|
|
318
318
|
|
319
319
|
|
320
320
|
|
321
|
-
.menu > ul
|
321
|
+
.menu > ul > li > ul > li {
|
322
322
|
|
323
323
|
margin: 0;
|
324
324
|
|
@@ -336,7 +336,7 @@
|
|
336
336
|
|
337
337
|
|
338
338
|
|
339
|
-
.menu > ul
|
339
|
+
.menu > ul > li > ul > li a {
|
340
340
|
|
341
341
|
color: #777;
|
342
342
|
|
@@ -352,7 +352,7 @@
|
|
352
352
|
|
353
353
|
|
354
354
|
|
355
|
-
.menu > ul
|
355
|
+
.menu > ul >li > ul > li > ul {
|
356
356
|
|
357
357
|
display: block;
|
358
358
|
|
@@ -372,9 +372,9 @@
|
|
372
372
|
|
373
373
|
|
374
374
|
|
375
|
-
.menu > ul
|
375
|
+
.menu > ul > li > ul > li > ul:before,
|
376
|
-
|
376
|
+
|
377
|
-
.menu > ul
|
377
|
+
.menu > ul > li > ul > li > ul:after {
|
378
378
|
|
379
379
|
content: "";
|
380
380
|
|
@@ -384,7 +384,7 @@
|
|
384
384
|
|
385
385
|
|
386
386
|
|
387
|
-
.menu > ul
|
387
|
+
.menu > ul > li > ul > li > ul:after {
|
388
388
|
|
389
389
|
clear: both;
|
390
390
|
|
@@ -392,7 +392,7 @@
|
|
392
392
|
|
393
393
|
|
394
394
|
|
395
|
-
.menu > ul
|
395
|
+
.menu > ul > li > ul > li > ul > li {
|
396
396
|
|
397
397
|
float: left;
|
398
398
|
|
@@ -408,7 +408,7 @@
|
|
408
408
|
|
409
409
|
|
410
410
|
|
411
|
-
.menu > ul
|
411
|
+
.menu > ul > li > ul > li > ul > li a {
|
412
412
|
|
413
413
|
border: 0;
|
414
414
|
|
@@ -416,7 +416,7 @@
|
|
416
416
|
|
417
417
|
|
418
418
|
|
419
|
-
.menu > ul
|
419
|
+
.menu > ul > li > ul.normal-sub {
|
420
420
|
|
421
421
|
width: 300px;
|
422
422
|
|
@@ -428,7 +428,7 @@
|
|
428
428
|
|
429
429
|
|
430
430
|
|
431
|
-
.menu > ul
|
431
|
+
.menu > ul > li > ul.normal-sub > li {
|
432
432
|
|
433
433
|
width: 100%;
|
434
434
|
|
@@ -436,7 +436,7 @@
|
|
436
436
|
|
437
437
|
|
438
438
|
|
439
|
-
.menu > ul
|
439
|
+
.menu > ul > li > ul.normal-sub > li a {
|
440
440
|
|
441
441
|
border: 0;
|
442
442
|
|
@@ -466,13 +466,13 @@
|
|
466
466
|
|
467
467
|
}
|
468
468
|
|
469
|
-
.menu > ul
|
469
|
+
.menu > ul {
|
470
470
|
|
471
471
|
display: none;
|
472
472
|
|
473
473
|
}
|
474
474
|
|
475
|
-
.menu > ul
|
475
|
+
.menu > ul > li {
|
476
476
|
|
477
477
|
width: 100%;
|
478
478
|
|
@@ -482,7 +482,7 @@
|
|
482
482
|
|
483
483
|
}
|
484
484
|
|
485
|
-
.menu > ul
|
485
|
+
.menu > ul> li a {
|
486
486
|
|
487
487
|
padding: 1.5em;
|
488
488
|
|
@@ -492,19 +492,19 @@
|
|
492
492
|
|
493
493
|
}
|
494
494
|
|
495
|
-
.menu > ul
|
495
|
+
.menu > ul > li > ul {
|
496
496
|
|
497
497
|
position: relative;
|
498
498
|
|
499
499
|
}
|
500
500
|
|
501
|
-
.menu > ul
|
501
|
+
.menu > ul > li > ul.normal-sub {
|
502
502
|
|
503
503
|
width: 100%;
|
504
504
|
|
505
505
|
}
|
506
506
|
|
507
|
-
.menu > ul
|
507
|
+
.menu > ul > li > ul > li {
|
508
508
|
|
509
509
|
float: none;
|
510
510
|
|
@@ -514,19 +514,19 @@
|
|
514
514
|
|
515
515
|
}
|
516
516
|
|
517
|
-
.menu > ul
|
517
|
+
.menu > ul > li > ul > li:first-child {
|
518
518
|
|
519
519
|
margin: 0;
|
520
520
|
|
521
521
|
}
|
522
522
|
|
523
|
-
.menu > ul
|
523
|
+
.menu > ul > li > ul > li > ul {
|
524
524
|
|
525
525
|
position: relative;
|
526
526
|
|
527
527
|
}
|
528
528
|
|
529
|
-
.menu > ul
|
529
|
+
.menu > ul > li > ul > li > ul > li {
|
530
530
|
|
531
531
|
float: none;
|
532
532
|
|
@@ -540,8 +540,6 @@
|
|
540
540
|
|
541
541
|
}
|
542
542
|
|
543
|
-
|
544
|
-
|
545
543
|
```
|
546
544
|
|
547
545
|
```js
|
@@ -554,13 +552,13 @@
|
|
554
552
|
|
555
553
|
|
556
554
|
|
557
|
-
$('.menu > ul
|
555
|
+
$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
|
558
|
-
|
556
|
+
|
559
|
-
$('.menu > ul
|
557
|
+
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
|
560
|
-
|
558
|
+
|
561
|
-
$(".menu > ul
|
559
|
+
$(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");
|
562
|
-
|
560
|
+
|
563
|
-
$(".menu > ul
|
561
|
+
$(".menu > ul > li").hover(function(e) {
|
564
562
|
|
565
563
|
if ($(window).width() > 943) {
|
566
564
|
|
@@ -572,7 +570,7 @@
|
|
572
570
|
|
573
571
|
});
|
574
572
|
|
575
|
-
$(".menu > ul
|
573
|
+
$(".menu > ul > li").click(function() {
|
576
574
|
|
577
575
|
if ($(window).width() <= 943) {
|
578
576
|
|
@@ -584,7 +582,7 @@
|
|
584
582
|
|
585
583
|
$(".menu-mobile").click(function(e) {
|
586
584
|
|
587
|
-
$(".menu > ul
|
585
|
+
$(".menu > ul").toggleClass('show-on-mobile');
|
588
586
|
|
589
587
|
e.preventDefault();
|
590
588
|
|
@@ -604,7 +602,7 @@
|
|
604
602
|
|
605
603
|
※PCなど画面が大きいときは表示させる
|
606
604
|
|
607
|
-
・アコーディオンになった際、 $(".menu > ul
|
605
|
+
・アコーディオンになった際、 $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");のmenuの部分を画像(ロゴ)にしたい。
|
608
606
|
|
609
607
|
です。
|
610
608
|
|
1
css
test
CHANGED
File without changes
|
test
CHANGED
@@ -144,9 +144,9 @@
|
|
144
144
|
|
145
145
|
.menu-mobile:after {
|
146
146
|
|
147
|
-
content: "\f3
|
147
|
+
content: "\f103";
|
148
|
-
|
148
|
+
|
149
|
-
font-family: "
|
149
|
+
font-family: "FontAwesome";
|
150
150
|
|
151
151
|
font-size: 2.5rem;
|
152
152
|
|