質問編集履歴

4

投稿の間違いを修正しました

2017/10/03 01:54

投稿

CHOUROU
CHOUROU

スコア11

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,8 @@
90
90
 
91
91
 
92
92
 
93
+ ```
94
+
93
95
  ```css
94
96
 
95
97
  @media screen and (min-width:768px){
@@ -296,6 +298,8 @@
296
298
 
297
299
  }
298
300
 
301
+
302
+
299
303
  @media screen and (max-width:767px){
300
304
 
301
305
  header {

3

修正しました

2017/10/03 01:54

投稿

CHOUROU
CHOUROU

スコア11

test CHANGED
File without changes
test CHANGED
@@ -90,7 +90,7 @@
90
90
 
91
91
 
92
92
 
93
- ``````css
93
+ ```css
94
94
 
95
95
  @media screen and (min-width:768px){
96
96
 
@@ -386,6 +386,4 @@
386
386
 
387
387
  }
388
388
 
389
-
390
-
391
389
  ```

2

cssを追加しました

2017/10/03 01:51

投稿

CHOUROU
CHOUROU

スコア11

test CHANGED
File without changes
test CHANGED
@@ -90,4 +90,302 @@
90
90
 
91
91
 
92
92
 
93
+ ``````css
94
+
95
+ @media screen and (min-width:768px){
96
+
97
+ header {
98
+
99
+ background: #FFF;
100
+
101
+ width: 100%;
102
+
103
+ margin:0 auto;
104
+
105
+ }
106
+
107
+ .logo img{
108
+
109
+ width:170px;
110
+
111
+ }
112
+
113
+ .logo img:hover{
114
+
115
+ opacity:0.5;
116
+
117
+ }
118
+
119
+ header ul a {
120
+
121
+ background: transparent;
122
+
123
+ margin: 0;
124
+
125
+ padding: 0;
126
+
127
+ font-size: 120%;
128
+
129
+ vertical-align: baseline;
130
+
131
+ text-decoration: none;
132
+
133
+ font-family: 'Cantata One', serif;
134
+
135
+ }
136
+
137
+
138
+
139
+ nav {
140
+
141
+ max-width: 970px;
142
+
143
+ width:80%;
144
+
145
+ height: 75px;
146
+
147
+ margin: 0px auto;
148
+
149
+ display: -webkit-flex;
150
+
151
+ display: flex;
152
+
153
+ -ms-align-items: center;
154
+
155
+ align-items: center;
156
+
157
+ position:relative;
158
+
159
+ }
160
+
161
+
162
+
163
+ header ul {
164
+
165
+ display: -webkit-flex;
166
+
167
+ display: flex;
168
+
169
+ list-style: none;
170
+
171
+ height:auto;
172
+
173
+ position:absolute;
174
+
175
+ right:0px;
176
+
177
+ }
178
+
179
+
180
+
181
+ header ul li a {
182
+
183
+ margin: 0px 10px;
184
+
185
+ padding: 10px;
186
+
187
+ border-radius: 5px;
188
+
189
+ color:#182d0e;
190
+
191
+ }
192
+
193
+ header ul li :hover{
194
+
195
+ opacity:0.5;
196
+
197
+ }
198
+
199
+ .nav__icon,
200
+
201
+ .nav__icon span {
202
+
203
+ display: none;
204
+
205
+
206
+
207
+ }
208
+
209
+
210
+
211
+ .nav__icon {
212
+
213
+ width: 36px;
214
+
215
+ height: 28px;
216
+
217
+ margin-right: 10px;
218
+
219
+ position: relative;
220
+
221
+ cursor: pointer;
222
+
223
+ }
224
+
225
+
226
+
227
+ .nav__icon span {
228
+
229
+ background: black;
230
+
231
+ position: absolute;
232
+
233
+ left: 0;
234
+
235
+ width: 100%;
236
+
237
+ height: 4px;
238
+
239
+ border-radius: 4px;
240
+
241
+
242
+
243
+ }
244
+
245
+
246
+
247
+ .nav__icon span:nth-of-type(1) {
248
+
249
+ top: 0;
250
+
251
+ }
252
+
253
+
254
+
255
+ .nav__icon span:nth-of-type(2) {
256
+
257
+ top: 12px;
258
+
259
+ }
260
+
261
+
262
+
263
+ .nav__icon span:nth-of-type(3) {
264
+
265
+ bottom: 0;
266
+
267
+ }
268
+
269
+
270
+
271
+ .nav__icon.active span:nth-of-type(1) {
272
+
273
+ -webkit-transform: translateY(12px) rotate(-45deg);
274
+
275
+ transform: translateY(12px) rotate(-45deg);
276
+
277
+ }
278
+
279
+
280
+
281
+ .nav__icon.active span:nth-of-type(2) {
282
+
283
+ display: none;
284
+
285
+ }
286
+
287
+
288
+
289
+ .nav__icon.active span:nth-of-type(3) {
290
+
291
+ -webkit-transform: translateY(-12px) rotate(45deg);
292
+
293
+ transform: translateY(-12px) rotate(45deg);
294
+
295
+ }
296
+
297
+ }
298
+
299
+ @media screen and (max-width:767px){
300
+
301
+ header {
302
+
303
+ position: relative;
304
+
305
+ z-index: 999;
306
+
307
+ }
308
+
309
+ header h1 {
310
+
311
+ margin: 0 auto;
312
+
313
+ }
314
+
315
+ header ul {
316
+
317
+ -webkit-flex-direction: column;
318
+
319
+ flex-direction: column;
320
+
321
+ -webkit-justify-content: center;
322
+
323
+ justify-content: center;
324
+
325
+ background: white;
326
+
327
+ position: absolute;
328
+
329
+ top: 80px;
330
+
331
+ left: 0px;
332
+
333
+ width: 100%;
334
+
335
+ z-index: 980;
336
+
337
+ }
338
+
339
+ header ul li {
340
+
341
+ padding: 10px;
342
+
343
+ text-align: center;
344
+
345
+ }
346
+
347
+ header ul li a {
348
+
349
+ display: block;
350
+
351
+ background: transparent;
352
+
353
+ margin: 0px;
354
+
355
+ padding: 20px;
356
+
357
+ }
358
+
359
+ header ul li a:hover {
360
+
361
+ color: #000;
362
+
363
+ background: #fff;
364
+
365
+ }
366
+
367
+ .nav__icon,
368
+
369
+ .nav__icon span {
370
+
371
+ display: inline-block;
372
+
373
+ transition: all .4s;
374
+
375
+ box-sizing: border-box;
376
+
377
+ z-index: 999;
378
+
379
+ position:absolute;
380
+
381
+ right:0;
382
+
383
+ }
384
+
385
+ }
386
+
387
+ }
388
+
389
+
390
+
93
391
  ```

1

ソースを追加しました

2017/10/03 01:50

投稿

CHOUROU
CHOUROU

スコア11

test CHANGED
File without changes
test CHANGED
@@ -7,3 +7,87 @@
7
7
  jQueryを使いはじめたばかりなので詳しく教えていただけるとうれしいです。
8
8
 
9
9
  よろしくお願いします。
10
+
11
+ ###ソースコード
12
+
13
+ ```html
14
+
15
+ <header id="header" role="heading">
16
+
17
+ <nav>
18
+
19
+ <div class="logo">
20
+
21
+ <a href=""><img src="logo.png"></a>
22
+
23
+ </div>
24
+
25
+ <ul>
26
+
27
+ <li><a href="">MENU</a></li>
28
+
29
+ <li><a href="">PHOTO</a></li>
30
+
31
+ <li><a href="">INFO</a></li>
32
+
33
+ </ul>
34
+
35
+ <div class="nav__icon">
36
+
37
+ <span></span>
38
+
39
+ <span></span>
40
+
41
+ <span></span>
42
+
43
+ </div>
44
+
45
+ </nav>
46
+
47
+ <!--/Nav-->
48
+
49
+ </header>
50
+
51
+ ```
52
+
53
+ ```jQuery
54
+
55
+ jQuery(function(){
56
+
57
+ jQuery(".nav__icon").on("click", function() {
58
+
59
+ jQuery(this).toggleClass("active");
60
+
61
+ jQuery("nav ul").slideToggle();
62
+
63
+ });
64
+
65
+
66
+
67
+
68
+
69
+ jQuery(window).resize(function(){
70
+
71
+ var w = $(window).width();
72
+
73
+ var h = $(window).height();
74
+
75
+ var x = 768;
76
+
77
+ if (w >= x) {
78
+
79
+ jQuery('nav ul').css({ display: 'flex',height: 'auto' });
80
+
81
+ }else {
82
+
83
+ jQuery('nav ul').css({ display: 'none',height: h + 'px'});
84
+
85
+ }
86
+
87
+ });
88
+
89
+ });
90
+
91
+
92
+
93
+ ```