質問編集履歴
1
書式修正、追加情報
test
CHANGED
File without changes
|
test
CHANGED
@@ -18,7 +18,15 @@
|
|
18
18
|
|
19
19
|
ハンバーガーメニュー(三となっている部分をクリックすると展開するナビゲーション)を実装したいのですが、中身にあたるナビ部分が隠れずに露出してしまいます。
|
20
20
|
|
21
|
+
Google Chromeのデベロッパーツールで確認するとスタイル(nav.menu)の部分に打ち消し線が入ってしまったり、
|
22
|
+
|
21
|
-
|
23
|
+
倀という文字がスタイルの指定部に入ってしまう(fontsize: 10pxが倀fontsize: 10pxとなる)といった不具合が起こりメニューを実装できていません。
|
24
|
+
|
25
|
+
メニュー部分以外はCSSが反映されているため、ファイルの指定が誤っているということはないかと思われます。
|
26
|
+
|
27
|
+
またメニュー(span)の挙動に関しては問題はないので、nav.menuのスタイルを反映させられれば、解決します。
|
28
|
+
|
29
|
+
|
22
30
|
|
23
31
|
```
|
24
32
|
|
@@ -34,10 +42,6 @@
|
|
34
42
|
|
35
43
|
```<div class="container">
|
36
44
|
|
37
|
-
<img src="image/headerlogo.png" alt="headerLogo" class="logo" id="headerLogo" link rel="#top">
|
38
|
-
|
39
|
-
<!-- ナビメニュー部分 -->
|
40
|
-
|
41
45
|
<nav class="menu">
|
42
46
|
|
43
47
|
<ul>
|
@@ -56,7 +60,7 @@
|
|
56
60
|
|
57
61
|
</nav>
|
58
62
|
|
59
|
-
|
63
|
+
|
60
64
|
|
61
65
|
<div class="Toggle">
|
62
66
|
|
@@ -74,39 +78,7 @@
|
|
74
78
|
|
75
79
|
CSS
|
76
80
|
|
77
|
-
```
|
81
|
+
```
|
78
|
-
|
79
|
-
margin:0px;
|
80
|
-
|
81
|
-
padding:0px;
|
82
|
-
|
83
|
-
top:0px;
|
84
|
-
|
85
|
-
left:0px;
|
86
|
-
|
87
|
-
width:100%;
|
88
|
-
|
89
|
-
height:50px;
|
90
|
-
|
91
|
-
text-align:;
|
92
|
-
|
93
|
-
/* position: fixed; */
|
94
|
-
|
95
|
-
flex-direction: row;
|
96
|
-
|
97
|
-
flex-wrap: nowrap;
|
98
|
-
|
99
|
-
justify-content:flex-start;
|
100
|
-
|
101
|
-
display:inline;
|
102
|
-
|
103
|
-
}
|
104
|
-
|
105
|
-
#headerLogo{
|
106
|
-
|
107
|
-
height: 130px;
|
108
|
-
|
109
|
-
}
|
110
82
|
|
111
83
|
.container{
|
112
84
|
|
@@ -122,37 +94,35 @@
|
|
122
94
|
|
123
95
|
/* ハンバーガーメニュー */
|
124
96
|
|
125
|
-
/*ナビメニューのスタイルを指定*/
|
126
|
-
|
127
97
|
.menu{
|
128
98
|
|
129
|
-
|
99
|
+
position: fixed;
|
130
|
-
|
100
|
+
|
131
|
-
z-index: 2;
|
101
|
+
z-index: 2;
|
132
|
-
|
102
|
+
|
133
|
-
top: 0;
|
103
|
+
top: 0;
|
134
|
-
|
104
|
+
|
135
|
-
left: 0;
|
105
|
+
left: 0;
|
136
|
-
|
106
|
+
|
137
|
-
background: #fff;
|
107
|
+
background: #fff;
|
138
|
-
|
108
|
+
|
139
|
-
color: #000;
|
109
|
+
color: #000;
|
140
|
-
|
110
|
+
|
141
|
-
text-align: center;
|
111
|
+
text-align: center;
|
142
|
-
|
112
|
+
|
143
|
-
width: 100%;
|
113
|
+
width: 100%;
|
144
|
-
|
114
|
+
|
145
|
-
transform: translateY(-100%);
|
115
|
+
transform: translateY(-100%);
|
146
|
-
|
116
|
+
|
147
|
-
transition: all 0.6s;
|
117
|
+
transition: all 0.6s;
|
148
|
-
|
118
|
+
|
149
|
-
}
|
119
|
+
}/*この部分のスタイルが反映されず打ち消し線が入っていました。*/
|
150
120
|
|
151
121
|
|
152
122
|
|
153
123
|
.menu ul{
|
154
124
|
|
155
|
-
background: #ccc;
|
125
|
+
background: #ccc;
|
156
126
|
|
157
127
|
width: 100%;
|
158
128
|
|
@@ -162,8 +132,6 @@
|
|
162
132
|
|
163
133
|
}
|
164
134
|
|
165
|
-
|
166
|
-
|
167
135
|
.menu ul li{
|
168
136
|
|
169
137
|
font-size: 1.1em;
|
@@ -178,21 +146,17 @@
|
|
178
146
|
|
179
147
|
}
|
180
148
|
|
181
|
-
|
182
|
-
|
183
149
|
.menu ul li:last-child{
|
184
150
|
|
185
151
|
padding-bottom: 0;
|
186
152
|
|
187
|
-
border-bottom: none;
|
153
|
+
border-bottom: none;
|
188
|
-
|
154
|
+
|
189
|
-
}
|
155
|
+
}
|
190
|
-
|
191
|
-
|
192
156
|
|
193
157
|
.menu ul li a{
|
194
158
|
|
195
|
-
display: block;
|
159
|
+
display: block;
|
196
160
|
|
197
161
|
color: #000;
|
198
162
|
|
@@ -200,21 +164,19 @@
|
|
200
164
|
|
201
165
|
}
|
202
166
|
|
203
|
-
/*トグルボタンが押されたときに付与するクラス*/
|
204
|
-
|
205
167
|
.menu.active{
|
206
168
|
|
207
169
|
transform: translateY(0%);
|
208
170
|
|
209
171
|
}
|
210
172
|
|
211
|
-
|
173
|
+
|
212
174
|
|
213
175
|
.Toggle {
|
214
176
|
|
215
177
|
display: block;
|
216
178
|
|
217
|
-
position: fixed;
|
179
|
+
position: fixed;
|
218
180
|
|
219
181
|
right: 13px;
|
220
182
|
|
@@ -242,11 +204,11 @@
|
|
242
204
|
|
243
205
|
border-bottom: solid 3px #000;
|
244
206
|
|
245
|
-
-webkit-transition: .35s ease-in-out;
|
207
|
+
-webkit-transition: .35s ease-in-out;
|
246
|
-
|
208
|
+
|
247
|
-
-moz-transition: .35s ease-in-out;
|
209
|
+
-moz-transition: .35s ease-in-out;
|
248
|
-
|
210
|
+
|
249
|
-
transition: .35s ease-in-out;
|
211
|
+
transition: .35s ease-in-out;
|
250
212
|
|
251
213
|
left: 6px;
|
252
214
|
|
@@ -260,16 +222,12 @@
|
|
260
222
|
|
261
223
|
}
|
262
224
|
|
263
|
-
|
264
|
-
|
265
225
|
.Toggle span:nth-child(2) {
|
266
226
|
|
267
227
|
top: 18px;
|
268
228
|
|
269
229
|
}
|
270
230
|
|
271
|
-
|
272
|
-
|
273
231
|
.Toggle span:nth-child(3) {
|
274
232
|
|
275
233
|
top: 27px;
|
@@ -278,8 +236,6 @@
|
|
278
236
|
|
279
237
|
|
280
238
|
|
281
|
-
/* 最初のspanをマイナス45度に */
|
282
|
-
|
283
239
|
.Toggle.active span:nth-child(1) {
|
284
240
|
|
285
241
|
top: 18px;
|
@@ -294,10 +250,6 @@
|
|
294
250
|
|
295
251
|
}
|
296
252
|
|
297
|
-
|
298
|
-
|
299
|
-
/* 2番目と3番目のspanを45度に */
|
300
|
-
|
301
253
|
.Toggle.active span:nth-child(2),
|
302
254
|
|
303
255
|
.Toggle.active span:nth-child(3) {
|