質問編集履歴
1
ご回答案をためしてみました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -173,3 +173,53 @@
|
|
|
173
173
|
「.txt」にpaddingやmarginを設定しても三本線の下に「メニュー」が表示されませんでした。
|
|
174
174
|
|
|
175
175
|
また背景色は右側と下側に広がってしまいました。
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
回答案を試しました。
|
|
182
|
+
|
|
183
|
+
テキストを<span>タグで括り、三本線の<span>タグの中に入れました
|
|
184
|
+
|
|
185
|
+
```html
|
|
186
|
+
|
|
187
|
+
<div><a id="toggle" class="nav-toggle-btn"><span class="text-menu"><span class="nav-toggle-btn_sen">MENU</span></span></a></div>
|
|
188
|
+
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
CSSには下記を追記しました。
|
|
192
|
+
|
|
193
|
+
```css
|
|
194
|
+
|
|
195
|
+
.nav-toggle-btn .text-menu{
|
|
196
|
+
|
|
197
|
+
position: relative;
|
|
198
|
+
|
|
199
|
+
padding-top: 0;
|
|
200
|
+
|
|
201
|
+
width: 0;
|
|
202
|
+
|
|
203
|
+
font-size:0.7rem;
|
|
204
|
+
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
.nav-toggle-btn .nav-toggle-btn_sen{
|
|
210
|
+
|
|
211
|
+
position: absolute;
|
|
212
|
+
|
|
213
|
+
top:0;
|
|
214
|
+
|
|
215
|
+
left:0;
|
|
216
|
+
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
結果はテキストの「.text-menu」のpaddingには「0」以上の数字を入れるとどんどん三本線とテキストが上に表示され、widthは「0」でも「10px」でも変化がありませんでした。
|
|
224
|
+
|
|
225
|
+
三本線の「.nav-toggle-btn_sen」には位置を設定すると、テキストも一緒に動きます。
|