teratail
回答率
85.29%
質問するログイン新規登録
トップに関する質問ヘッダーのカスタマイズについて

編集履歴

質問編集履歴

3

css

2017/12/11 02:21

投稿

io-rin
io-rin

スコア13

title CHANGED
File without changes
body CHANGED
File without changes

2

css

2017/12/11 02:20

投稿

io-rin
io-rin

スコア13

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  現在下記の様なヘッダーを作成しています。
2
- https://jsfiddle.net/v0tqd2v1/?utm_source=website&utm_medium=embed&utm_campaign=v0tqd2v1
2
+ https://jsfiddle.net/v0tqd2v1/3/?utm_source=website&utm_medium=embed&utm_campaign=v0tqd2v1
3
3
  ```html
4
4
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
5
5
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
@@ -92,7 +92,7 @@
92
92
  color: #333;
93
93
  }
94
94
 
95
- .menu > ul.menu-list {
95
+ .menu > ul {
96
96
  margin: 0 auto;
97
97
  width: 100%;
98
98
  list-style: none;
@@ -105,35 +105,35 @@
105
105
  box-sizing: border-box;
106
106
  }
107
107
 
108
- .menu > ul.menu-list:before,
108
+ .menu > ul:before,
109
- .menu > ul.menu-list:after {
109
+ .menu > ul:after {
110
110
  content: "";
111
111
  display: table;
112
112
  }
113
113
 
114
- .menu > ul.menu-list:after {
114
+ .menu > ul:after {
115
115
  clear: both;
116
116
  }
117
117
 
118
- .menu > ul.menu-list > li {
118
+ .menu > ul > li {
119
119
  display: inline-block;
120
120
  background: #fff;
121
121
  padding: 0;
122
122
  margin: 0;
123
123
  }
124
124
 
125
- .menu > ul.menu-list > li a {
125
+ .menu > ul > li a {
126
126
  text-decoration: none;
127
127
  padding: .5em 3em;
128
128
  display: block;
129
129
  }
130
130
 
131
- .menu > ul.menu-list > li:hover {
131
+ .menu > ul > li:hover {
132
132
  background: #f0f0f0;
133
133
  color: #red;
134
134
  }
135
135
 
136
- .menu > ul.menu-list > li > ul {
136
+ .menu > ul > li > ul {
137
137
  display: none;
138
138
  width: 100%;
139
139
  background: #fff;
@@ -148,17 +148,17 @@
148
148
  box-sizing: border-box;
149
149
  }
150
150
 
151
- .menu > ul.menu-list > li > ul:before,
151
+ .menu > ul > li > ul:before,
152
- .menu > ul.menu-list > li > ul:after {
152
+ .menu > ul> li > ul:after {
153
153
  content: "";
154
154
  display: table;
155
155
  }
156
156
 
157
- .menu > ul.menu-list > li > ul:after {
157
+ .menu > ul > li > ul:after {
158
158
  clear: both;
159
159
  }
160
160
 
161
- .menu > ul.menu-list > li > ul > li {
161
+ .menu > ul > li > ul > li {
162
162
  margin: 0;
163
163
  padding-bottom: 0;
164
164
  list-style: none;
@@ -167,7 +167,7 @@
167
167
  float: left;
168
168
  }
169
169
 
170
- .menu > ul.menu-list > li > ul > li a {
170
+ .menu > ul > li > ul > li a {
171
171
  color: #777;
172
172
  padding: .2em 0;
173
173
  width: 95%;
@@ -175,7 +175,7 @@
175
175
  border-bottom: 1px solid #ccc;
176
176
  }
177
177
 
178
- .menu > ul.menu-list > li > ul > li > ul {
178
+ .menu > ul >li > ul > li > ul {
179
179
  display: block;
180
180
  padding: 0;
181
181
  margin: 10px 0 0;
@@ -185,17 +185,17 @@
185
185
  box-sizing: border-box;
186
186
  }
187
187
 
188
- .menu > ul.menu-list > li > ul > li > ul:before,
188
+ .menu > ul > li > ul > li > ul:before,
189
- .menu > ul.menu-list > li > ul > li > ul:after {
189
+ .menu > ul > li > ul > li > ul:after {
190
190
  content: "";
191
191
  display: table;
192
192
  }
193
193
 
194
- .menu > ul.menu-list > li > ul > li > ul:after {
194
+ .menu > ul > li > ul > li > ul:after {
195
195
  clear: both;
196
196
  }
197
197
 
198
- .menu > ul.menu-list > li > ul > li > ul > li {
198
+ .menu > ul > li > ul > li > ul > li {
199
199
  float: left;
200
200
  width: 100%;
201
201
  padding: 10px 0;
@@ -203,21 +203,21 @@
203
203
  font-size: .8em;
204
204
  }
205
205
 
206
- .menu > ul.menu-list > li > ul > li > ul > li a {
206
+ .menu > ul > li > ul > li > ul > li a {
207
207
  border: 0;
208
208
  }
209
209
 
210
- .menu > ul.menu-list > li > ul.normal-sub {
210
+ .menu > ul > li > ul.normal-sub {
211
211
  width: 300px;
212
212
  left: auto;
213
213
  padding: 10px 20px;
214
214
  }
215
215
 
216
- .menu > ul.menu-list > li > ul.normal-sub > li {
216
+ .menu > ul > li > ul.normal-sub > li {
217
217
  width: 100%;
218
218
  }
219
219
 
220
- .menu > ul.menu-list > li > ul.normal-sub > li a {
220
+ .menu > ul > li > ul.normal-sub > li a {
221
221
  border: 0;
222
222
  padding: 1em 0;
223
223
  }
@@ -232,66 +232,65 @@
232
232
  .menu-dropdown-icon:before {
233
233
  display: block;
234
234
  }
235
- .menu > ul.menu-list {
235
+ .menu > ul {
236
236
  display: none;
237
237
  }
238
- .menu > ul.menu-list > li {
238
+ .menu > ul > li {
239
239
  width: 100%;
240
240
  float: none;
241
241
  display: block;
242
242
  }
243
- .menu > ul.menu-list > li a {
243
+ .menu > ul> li a {
244
244
  padding: 1.5em;
245
245
  width: 100%;
246
246
  display: block;
247
247
  }
248
- .menu > ul.menu-list > li > ul {
248
+ .menu > ul > li > ul {
249
249
  position: relative;
250
250
  }
251
- .menu > ul.menu-list > li > ul.normal-sub {
251
+ .menu > ul > li > ul.normal-sub {
252
252
  width: 100%;
253
253
  }
254
- .menu > ul.menu-list > li > ul > li {
254
+ .menu > ul > li > ul > li {
255
255
  float: none;
256
256
  width: 100%;
257
257
  margin-top: 20px;
258
258
  }
259
- .menu > ul.menu-list > li > ul > li:first-child {
259
+ .menu > ul > li > ul > li:first-child {
260
260
  margin: 0;
261
261
  }
262
- .menu > ul.menu-list > li > ul > li > ul {
262
+ .menu > ul > li > ul > li > ul {
263
263
  position: relative;
264
264
  }
265
- .menu > ul.menu-list > li > ul > li > ul > li {
265
+ .menu > ul > li > ul > li > ul > li {
266
266
  float: none;
267
267
  }
268
268
  .menu .show-on-mobile {
269
269
  display: block;
270
270
  }
271
271
  }
272
-
273
272
  ```
274
273
  ```js
275
274
  $(document).ready(function() {
276
275
 
277
276
  "use strict";
278
277
 
279
- $('.menu > ul.menu-list > li:has( > ul)').addClass('menu-dropdown-icon');
278
+ $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
280
- $('.menu > ul.menu-list > li > ul:not(:has(ul))').addClass('normal-sub');
279
+ $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
281
- $(".menu > ul.menu-list").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");
280
+ $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");
282
- $(".menu > ul.menu-list > li").hover(function(e) {
281
+ $(".menu > ul > li").hover(function(e) {
283
282
  if ($(window).width() > 943) {
284
283
  $(this).children("ul").stop(true, false).fadeToggle(150);
285
284
  e.preventDefault();
286
285
  }
287
286
  });
288
- $(".menu > ul.menu-list > li").click(function() {
287
+ $(".menu > ul > li").click(function() {
289
288
  if ($(window).width() <= 943) {
290
289
  $(this).children("ul").fadeToggle(150);
291
290
  }
292
291
  });
293
292
  $(".menu-mobile").click(function(e) {
294
- $(".menu > ul.menu-list").toggleClass('show-on-mobile');
293
+ $(".menu > ul").toggleClass('show-on-mobile');
295
294
  e.preventDefault();
296
295
  });
297
296
  });
@@ -301,6 +300,6 @@
301
300
  やりたいこと。
302
301
  ・画面が小さくなった時（アコーディオン）になった時メガメニューを表示させない。
303
302
  ※PCなど画面が大きいときは表示させる
304
- ・アコーディオンになった際、 $(".menu > ul.menu-list").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");のmenuの部分を画像（ロゴ）にしたい。
303
+ ・アコーディオンになった際、 $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">menu</a>");のmenuの部分を画像（ロゴ）にしたい。
305
304
  です。
306
305
  よろしくお願いします。

1

css

2017/12/08 10:37

投稿

io-rin
io-rin

スコア13

title CHANGED
File without changes
body CHANGED
@@ -71,8 +71,8 @@
71
71
  }
72
72
 
73
73
  .menu-mobile:after {
74
- content: "\f394";
74
+ content: "\f103";
75
- font-family: "Ionicons";
75
+ font-family: "FontAwesome";
76
76
  font-size: 2.5rem;
77
77
  padding: 0;
78
78
  float: right;