質問編集履歴

3

css

2017/12/11 02:21

投稿

io-rin
io-rin

スコア13

test CHANGED
File without changes
test CHANGED
File without changes

2

css

2017/12/11 02:20

投稿

io-rin
io-rin

スコア13

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.menu-list {
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.menu-list:before,
215
+ .menu > ul:before,
216
-
216
+
217
- .menu > ul.menu-list:after {
217
+ .menu > ul:after {
218
218
 
219
219
  content: "";
220
220
 
@@ -224,7 +224,7 @@
224
224
 
225
225
 
226
226
 
227
- .menu > ul.menu-list:after {
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.menu-list > li {
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.menu-list > li a {
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.menu-list > li:hover {
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.menu-list > li > 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.menu-list > li > ul:before,
301
+ .menu > ul > li > ul:before,
302
-
302
+
303
- .menu > ul.menu-list > li > ul:after {
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.menu-list > li > ul:after {
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.menu-list > li > ul > li {
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.menu-list > li > ul > li a {
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.menu-list > li > ul > li > 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.menu-list > li > ul > li > ul:before,
375
+ .menu > ul > li > ul > li > ul:before,
376
-
376
+
377
- .menu > ul.menu-list > li > ul > li > ul:after {
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.menu-list > li > ul > li > ul:after {
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.menu-list > li > ul > li > ul > li {
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.menu-list > li > ul > li > ul > li a {
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.menu-list > li > ul.normal-sub {
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.menu-list > li > ul.normal-sub > li {
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.menu-list > li > ul.normal-sub > li a {
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.menu-list {
469
+ .menu > ul {
470
470
 
471
471
  display: none;
472
472
 
473
473
  }
474
474
 
475
- .menu > ul.menu-list > li {
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.menu-list > li a {
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.menu-list > li > ul {
495
+ .menu > ul > li > ul {
496
496
 
497
497
  position: relative;
498
498
 
499
499
  }
500
500
 
501
- .menu > ul.menu-list > li > ul.normal-sub {
501
+ .menu > ul > li > ul.normal-sub {
502
502
 
503
503
  width: 100%;
504
504
 
505
505
  }
506
506
 
507
- .menu > ul.menu-list > li > ul > li {
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.menu-list > li > ul > li:first-child {
517
+ .menu > ul > li > ul > li:first-child {
518
518
 
519
519
  margin: 0;
520
520
 
521
521
  }
522
522
 
523
- .menu > ul.menu-list > li > ul > li > ul {
523
+ .menu > ul > li > ul > li > ul {
524
524
 
525
525
  position: relative;
526
526
 
527
527
  }
528
528
 
529
- .menu > ul.menu-list > li > ul > li > ul > li {
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.menu-list > li:has( > ul)').addClass('menu-dropdown-icon');
555
+ $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
558
-
556
+
559
- $('.menu > ul.menu-list > li > ul:not(:has(ul))').addClass('normal-sub');
557
+ $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
560
-
558
+
561
- $(".menu > ul.menu-list").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");
559
+ $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");
562
-
560
+
563
- $(".menu > ul.menu-list > li").hover(function(e) {
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.menu-list > li").click(function() {
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.menu-list").toggleClass('show-on-mobile');
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.menu-list").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");のmenuの部分を画像(ロゴ)にしたい。
605
+ ・アコーディオンになった際、 $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");のmenuの部分を画像(ロゴ)にしたい。
608
606
 
609
607
  です。
610
608
 

1

css

2017/12/08 10:37

投稿

io-rin
io-rin

スコア13

test CHANGED
File without changes
test CHANGED
@@ -144,9 +144,9 @@
144
144
 
145
145
  .menu-mobile:after {
146
146
 
147
- content: "\f394";
147
+ content: "\f103";
148
-
148
+
149
- font-family: "Ionicons";
149
+ font-family: "FontAwesome";
150
150
 
151
151
  font-size: 2.5rem;
152
152