teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問下記のメニューバーの作成方法

編集履歴

質問編集履歴

1

コードの訂正を行いました

2020/06/02 02:16

投稿

Rin0123
Rin0123

スコア2

test CHANGED
File without changes
test CHANGED
@@ -24,47 +24,47 @@
24
24
 
25
25
  <body>
26
26
 
27
- <div class="mainBox-nav">
27
+ <div class="mainBox-nav">
28
28
 
29
29
  <nav id="mainNav">
30
30
 
31
31
  <ul id="nav-contents">
32
32
 
33
- <li class="nav-item">
34
-
35
- <a href="">
36
-
37
- <i class="fa fa-home" style="background-color: #5fb3f9;"></i>
33
+ <li class="nav-item" style="background-color: #5fb3f9;">
34
+
35
+ <a href="index.html">
36
+
37
+ <i class="fa fa-home"></i>
38
38
 
39
39
  </a>
40
40
 
41
41
  </li>
42
42
 
43
- <li class="nav-item">
43
+ <li class="nav-item" style="background-color: #60ead3;">
44
-
44
+
45
- <a href="">
45
+ <a href="#">
46
-
46
+
47
- <i class="fa fa-heartbeat" style="background-color: #60ead3;"></i>
47
+ <i class="fa fa-heartbeat"></i>
48
48
 
49
49
  </a>
50
50
 
51
51
  </li>
52
52
 
53
- <li class="nav-item">
53
+ <li class="nav-item" style="background-color: #fda660;">
54
-
54
+
55
- <a href="">
55
+ <a href="#">
56
-
56
+
57
- <i class="fa fa-codepen" style="background-color: #fda660;"></i>
57
+ <i class="fa fa-codepen" ></i>
58
58
 
59
59
  </a>
60
60
 
61
61
  </li>
62
62
 
63
- <li class="nav-item">
63
+ <li class="nav-item" style="background-color: #fd7b87;">
64
-
64
+
65
- <a href="">
65
+ <a href="#">
66
-
66
+
67
- <i class="fa fa-gear" style="background-color: #fd7b87;"></i>
67
+ <i class="fa fa-gear"></i>
68
68
 
69
69
  </a>
70
70
 
@@ -74,6 +74,16 @@
74
74
 
75
75
  </nav>
76
76
 
77
+ <div id="header" class="animate hide">
78
+
79
+ <div id="h-inner" class="animate">
80
+
81
+ <h1>Page title</h1>
82
+
83
+ </div>
84
+
85
+ </div>
86
+
77
87
  </div>
78
88
 
79
89
  </body>
@@ -86,6 +96,18 @@
86
96
 
87
97
  .mainBox-nav{
88
98
 
99
+ background-color: #f1f4f5;
100
+
101
+ font: 14px/28px 'Open Sans', sans-serif;
102
+
103
+ height: 650px;
104
+
105
+ width: 100%;
106
+
107
+ }
108
+
109
+ #header {
110
+
89
111
  position: relative;
90
112
 
91
113
  width: 100%;
@@ -100,13 +122,13 @@
100
122
 
101
123
  }
102
124
 
103
- #h-inner{
125
+ #h-inner {
104
-
126
+
105
- width: 100%;
127
+ width: 100%;
106
128
 
107
129
  height: 100%;
108
130
 
109
- color: white;
131
+ color: #fff;
110
132
 
111
133
  line-height: 150px;
112
134
 
@@ -144,7 +166,7 @@
144
166
 
145
167
  width:150px;
146
168
 
147
- height:100px;
169
+ height:150px;
148
170
 
149
171
  background-color:orange;
150
172
 
@@ -154,7 +176,7 @@
154
176
 
155
177
  line-height:150px;
156
178
 
157
- cursor: auto;
179
+ cursor: pointer;
158
180
 
159
181
  }
160
182
 
@@ -184,6 +206,8 @@
184
206
 
185
207
  display:block;
186
208
 
209
+ text-decoration: none;
210
+
187
211
  }
188
212
 
189
213
  nav-item i{
@@ -192,6 +216,38 @@
192
216
 
193
217
  }
194
218
 
219
+ .animate {
220
+
221
+ -webkit-transition: all .8s ease-in-out;
222
+
223
+ -moz-transition: all .8s ease-in-out;
224
+
225
+ -o-transition: all .8s ease-in-out;
226
+
227
+ transition: all .8s ease-in-out;
228
+
229
+ }
230
+
231
+
232
+
233
+ .cred {
234
+
235
+ color: #969696;
236
+
237
+ font-size: 7pt;
238
+
239
+ text-align: center;
240
+
241
+ margin-top: 20px;
242
+
243
+ text-decoration: none;
244
+
245
+ width: 100%;
246
+
247
+ display: block;
248
+
249
+ }
250
+
195
251
  ```
196
252
 
197
253
  ```js
@@ -212,9 +268,9 @@
212
268
 
213
269
  var navcol = $(this).css('backgroundColor');
214
270
 
215
- $('#mainNav').removeClass('show');
271
+ $('#header').removeClass('show');
216
-
272
+
217
- $('#mainNav').addClass('hide');
273
+ $('#header').addClass('hide');
218
274
 
219
275
 
220
276
 
@@ -228,13 +284,13 @@
228
284
 
229
285
  $('.active').prependTo('#nav-contents').show(800);
230
286
 
231
- $('nav-item').removeClass('active');
287
+ $('.nav-item').removeClass('active');
232
-
288
+
233
- $('#mainNav').removeClass('hide');
289
+ $('#header').removeClass('hide');
234
-
290
+
235
- $('#mainNav').addClass('show');
291
+ $('#header').addClass('show');
236
-
292
+
237
- $('#mainNav').css({
293
+ $('#header').css({
238
294
 
239
295
  "background-color": navcol
240
296