回答編集履歴

2

追記

2017/04/11 00:29

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -195,3 +195,221 @@
195
195
  </html>
196
196
 
197
197
  ```
198
+
199
+ #**追記**
200
+
201
+ ```HTML
202
+
203
+ <!DOCTYPE html>
204
+
205
+ <html lang="ja">
206
+
207
+ <head>
208
+
209
+ <meta charset="UTF-8">
210
+
211
+ <title>タイトル</title>
212
+
213
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
214
+
215
+ <style type="text/css">
216
+
217
+ .navbar-header {
218
+
219
+ float: none;
220
+
221
+ }
222
+
223
+
224
+
225
+ .navbar-toggle {
226
+
227
+ display: block;
228
+
229
+ }
230
+
231
+
232
+
233
+ .navbar-collapse.collapse {
234
+
235
+ display: none !important;
236
+
237
+ }
238
+
239
+
240
+
241
+ .navbar-nav {
242
+
243
+ float: none !important;
244
+
245
+ }
246
+
247
+
248
+
249
+ .navbar-nav > li {
250
+
251
+ float: none;
252
+
253
+ }
254
+
255
+
256
+
257
+ .navbar-collapse.collapse.in {
258
+
259
+ display: block !important;
260
+
261
+ }
262
+
263
+
264
+
265
+ .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
266
+
267
+ transform: rotate(0deg);
268
+
269
+ top: 0;
270
+
271
+ }
272
+
273
+
274
+
275
+ .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
276
+
277
+ opacity: 1;
278
+
279
+ width: 100%;
280
+
281
+ margin-left: 0;
282
+
283
+ }
284
+
285
+
286
+
287
+ .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
288
+
289
+ transform: rotate(0deg);
290
+
291
+ bottom: 0;
292
+
293
+ }
294
+
295
+
296
+
297
+ .navbar .navbar-toggle .icon-bar {
298
+
299
+ position: relative;
300
+
301
+ transition: all 200ms ease-in-out;
302
+
303
+ }
304
+
305
+
306
+
307
+ .navbar .navbar-toggle .icon-bar:nth-of-type(1) {
308
+
309
+ transform: rotate(45deg);
310
+
311
+ top: 6px;
312
+
313
+ }
314
+
315
+
316
+
317
+ .navbar .navbar-toggle .icon-bar:nth-of-type(2) {
318
+
319
+ opacity: 0;
320
+
321
+ width: 0;
322
+
323
+ margin-left: 50%;
324
+
325
+ }
326
+
327
+
328
+
329
+ .navbar .navbar-toggle .icon-bar:nth-of-type(3) {
330
+
331
+ transform: rotate(-45deg);
332
+
333
+ bottom: 6px;
334
+
335
+ }
336
+
337
+
338
+
339
+ .text1 > a:before {
340
+
341
+ font-family: "Glyphicons Halflings", sans-serif;
342
+
343
+ content: "\e162";
344
+
345
+ }
346
+
347
+
348
+
349
+ .text2 > a:before {
350
+
351
+ font-family: "Glyphicons Halflings", sans-serif;
352
+
353
+ content: "\e005";
354
+
355
+ }
356
+
357
+
358
+
359
+ .text3 > a:before {
360
+
361
+ font-family: "Glyphicons Halflings", sans-serif;
362
+
363
+ content: "\e104";
364
+
365
+ }
366
+
367
+ </style>
368
+
369
+ </head>
370
+
371
+ <body>
372
+
373
+ <div class="navbar navbar-default navbar-fixed-top">
374
+
375
+ <div class="navbar-header">
376
+
377
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#main-nav">
378
+
379
+ <span class="icon-bar"></span>
380
+
381
+ <span class="icon-bar"></span>
382
+
383
+ <span class="icon-bar"></span>
384
+
385
+ </button>
386
+
387
+ <a class="navbar-brand" href="#">テキスト</a>
388
+
389
+ </div>
390
+
391
+ <div id="main-nav" class="navbar-collapse collapse">
392
+
393
+ <ul class="nav navbar-nav">
394
+
395
+ <li class="active text1"><a href="#">テキスト</a></li>
396
+
397
+ <li class="text2"><a href="#">テキスト</a></li>
398
+
399
+ <li class="text3"><a href="#">テキスト</a></li>
400
+
401
+ </ul>
402
+
403
+ </div>
404
+
405
+ </div>
406
+
407
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
408
+
409
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
410
+
411
+ </body>
412
+
413
+ </html>
414
+
415
+ ```

1

修正

2017/04/11 00:28

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
File without changes