teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2017/04/11 00:29

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -96,4 +96,113 @@
96
96
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
97
97
  </body>
98
98
  </html>
99
+ ```
100
+ #**追記**
101
+ ```HTML
102
+ <!DOCTYPE html>
103
+ <html lang="ja">
104
+ <head>
105
+ <meta charset="UTF-8">
106
+ <title>タイトル</title>
107
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
108
+ <style type="text/css">
109
+ .navbar-header {
110
+ float: none;
111
+ }
112
+
113
+ .navbar-toggle {
114
+ display: block;
115
+ }
116
+
117
+ .navbar-collapse.collapse {
118
+ display: none !important;
119
+ }
120
+
121
+ .navbar-nav {
122
+ float: none !important;
123
+ }
124
+
125
+ .navbar-nav > li {
126
+ float: none;
127
+ }
128
+
129
+ .navbar-collapse.collapse.in {
130
+ display: block !important;
131
+ }
132
+
133
+ .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
134
+ transform: rotate(0deg);
135
+ top: 0;
136
+ }
137
+
138
+ .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
139
+ opacity: 1;
140
+ width: 100%;
141
+ margin-left: 0;
142
+ }
143
+
144
+ .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
145
+ transform: rotate(0deg);
146
+ bottom: 0;
147
+ }
148
+
149
+ .navbar .navbar-toggle .icon-bar {
150
+ position: relative;
151
+ transition: all 200ms ease-in-out;
152
+ }
153
+
154
+ .navbar .navbar-toggle .icon-bar:nth-of-type(1) {
155
+ transform: rotate(45deg);
156
+ top: 6px;
157
+ }
158
+
159
+ .navbar .navbar-toggle .icon-bar:nth-of-type(2) {
160
+ opacity: 0;
161
+ width: 0;
162
+ margin-left: 50%;
163
+ }
164
+
165
+ .navbar .navbar-toggle .icon-bar:nth-of-type(3) {
166
+ transform: rotate(-45deg);
167
+ bottom: 6px;
168
+ }
169
+
170
+ .text1 > a:before {
171
+ font-family: "Glyphicons Halflings", sans-serif;
172
+ content: "\e162";
173
+ }
174
+
175
+ .text2 > a:before {
176
+ font-family: "Glyphicons Halflings", sans-serif;
177
+ content: "\e005";
178
+ }
179
+
180
+ .text3 > a:before {
181
+ font-family: "Glyphicons Halflings", sans-serif;
182
+ content: "\e104";
183
+ }
184
+ </style>
185
+ </head>
186
+ <body>
187
+ <div class="navbar navbar-default navbar-fixed-top">
188
+ <div class="navbar-header">
189
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#main-nav">
190
+ <span class="icon-bar"></span>
191
+ <span class="icon-bar"></span>
192
+ <span class="icon-bar"></span>
193
+ </button>
194
+ <a class="navbar-brand" href="#">テキスト</a>
195
+ </div>
196
+ <div id="main-nav" class="navbar-collapse collapse">
197
+ <ul class="nav navbar-nav">
198
+ <li class="active text1"><a href="#">テキスト</a></li>
199
+ <li class="text2"><a href="#">テキスト</a></li>
200
+ <li class="text3"><a href="#">テキスト</a></li>
201
+ </ul>
202
+ </div>
203
+ </div>
204
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
205
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
206
+ </body>
207
+ </html>
99
208
  ```

1

修正

2017/04/11 00:28

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
File without changes