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

質問編集履歴

4

現状説明の追加その2

2018/04/18 12:07

投稿

ogiogi
ogiogi

スコア11

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,10 @@
3
3
 
4
4
  //現状説明の追加
5
5
  検証ツールでのスマホの表示と実機に対して、ブラウザをただ小さくして表示してみる事の違いは何でしょう。わかる方教えてください。
6
+ class="fixed open"であれば、メニューが表示され、class="fixed"であれば、表示はされず閉じた状態になります。
6
7
 
8
+ 検証ツールでのスマホの表示と実機に対して、ブラウザをただ小さくして表示してみる事でのデベロッパーツール elementの違いは、class="fixed open"が書き換わらないところです。なぜ、書き換わらないのでしょう。×ボタンを押すときには書き換わります。
9
+
7
10
  ```
8
11
  (function($) {
9
12
  $(function() {

3

現状説明の追加

2018/04/18 12:07

投稿

ogiogi
ogiogi

スコア11

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,9 @@
1
1
  htmlサイトでスマホでハンバーガーメニューを設置して、動かしていたところ、実機と、検証ツールでスマホにして確認した時のみ、メニューが閉じません。
2
2
  ブラウザ幅を小さくした時にはきちんととじるのですが。。。
3
3
 
4
+ //現状説明の追加
5
+ 検証ツールでのスマホの表示と実機に対して、ブラウザをただ小さくして表示してみる事の違いは何でしょう。わかる方教えてください。
6
+
4
7
  ```
5
8
  (function($) {
6
9
  $(function() {

2

js、cssファイルの記述を追加

2018/04/18 11:53

投稿

ogiogi
ogiogi

スコア11

title CHANGED
File without changes
body CHANGED
@@ -36,7 +36,9 @@
36
36
  ```
37
37
  html
38
38
  ```
39
+ <link rel="stylesheet" media="screen and (max-width:640px)" href="hoge.css" >
39
40
 
41
+
40
42
  <header id="top-head">
41
43
  <div class="inner clearfix">
42
44
  <div id="mobile-head">
@@ -61,6 +63,9 @@
61
63
  </header>
62
64
 
63
65
 
66
+
67
+ <script type="text/javascript" src="hoge.js"></script>
68
+
64
69
  コード
65
70
  ```
66
71
 

1

cssとhtmの追加

2018/04/18 08:52

投稿

ogiogi
ogiogi

スコア11

title CHANGED
File without changes
body CHANGED
@@ -34,5 +34,260 @@
34
34
  });
35
35
  })(jQuery);
36
36
  ```
37
+ html
38
+ ```
37
39
 
40
+ <header id="top-head">
41
+ <div class="inner clearfix">
42
+ <div id="mobile-head">
43
+ <div id="nav-toggle">
44
+ <div>
45
+ <span></span>
46
+ <span></span>
47
+ <span></span>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ <nav id="global-nav">
52
+ <ul>
53
+ <li><a href="#next"><span>CONCEPT</span></a></li>
54
+ <li><a href="#store"><span>STORE</span></a></li>
55
+ <li><a href="#menu"><span>MENU</span></a></li>
56
+ <li><a href="#map"><span>MAP</span></a></li>
57
+ <li><a href="mailto:user@dammy.com?subject=サイトからの問い合わせ"><span>CONTACT</span></a></li>
58
+ </ul>
59
+ </nav>
60
+ </div>
61
+ </header>
62
+
63
+
64
+ コード
65
+ ```
66
+
67
+ CSS
68
+ ```#top-head {
69
+ position: absolute;
70
+ width: 100%;
71
+ top: -100px;
72
+ margin: 100px auto 0;
73
+ padding: 30px 0 10px;
74
+ background: rgba(255,255,255,.7);
75
+ z-index: 999;
76
+ }
77
+
78
+ #top-head a,
79
+ #top-head {
80
+ color: #0F0F0F;
81
+ text-decoration: none;
82
+ }
83
+
84
+ #top-head .inner {
85
+ position: relative;
86
+ }
87
+
88
+ /* Fixed */
89
+ #top-head.fixed {
90
+ margin-top: 0;
91
+ top: 0;
92
+ position: fixed;
93
+ background-color: #0F0F0F;
94
+ transition: top 0.65s ease-in;
95
+ -webkit-transition: top 0.65s ease-in;
96
+ -moz-transition: top 0.65s ease-in;
97
+ }
98
+
99
+ #top-head a.fixed {
100
+ color: #F0F0F0;
101
+ }
102
+
103
+ #top-head .inner {
104
+ position: relative;
105
+ }
106
+
107
+ /* Toggle Button */
108
+ #nav-toggle {
109
+ display: none;
110
+ }
111
+
112
+ #nav-toggle div {
113
+ position: relative;
114
+ }
115
+
116
+ #nav-toggle span {
117
+ display: block;
118
+ position: absolute;
119
+ height: 4px;
120
+ width: 100%;
121
+ background: #F0F0F0;
122
+ left: 0;
123
+ -webkit-transition: 0.35s ease-in-out;
124
+ -moz-transition: 0.35s ease-in-out;
125
+ transition: 0.35s ease-in-out;
126
+ }
127
+
128
+ #nav-toggle span:nth-child(1) {
129
+ top: 0;
130
+ }
131
+
132
+ #nav-toggle span:nth-child(2) {
133
+ top: 11px;
134
+ }
135
+
136
+ #nav-toggle span:nth-child(3) {
137
+ top: 22px;
138
+ }
139
+
140
+ #global-nav ul {
141
+ position: absolute;
142
+ right: 0;
143
+ bottom: 0;
144
+ }
145
+
146
+ #global-nav ul li {
147
+ float: left;
148
+ font-size: 20px;
149
+ letter-spacing: 0.1em;
150
+ }
151
+
152
+ #global-nav ul li a {
153
+ padding-right: 30px;
154
+ }
155
+
156
+ #global-nav ul li a:hover {
157
+ color:#D65050;
158
+ }
159
+
160
+ コード
161
+ ```
162
+
163
+ スマホcss
164
+ ```/*
165
+ #top-head,
166
+ .inner {
167
+ width: 100%;
168
+ padding: 0;
169
+ }
170
+
171
+ #top-head {
172
+ top: 0;
173
+ margin-top: 0;
174
+ }
175
+
176
+ /* Fixed reset */
177
+ #top-head.fixed {
178
+ padding-top: 0;
179
+ background: transparent;
180
+ }
181
+
182
+ #top-head #global-nav ul li a,
183
+ #top-head.fixed #global-nav ul li a {
184
+ display: block;
185
+ width: 100%;
186
+ padding: 18px 0;
187
+ font-size: 26px;
188
+ color: #D65050;
189
+ letter-spacing: 0.3em;
190
+ }
191
+
192
+ #top-head,
193
+ .inner {
194
+ width: 100%;
195
+ padding: 0;
196
+ }
197
+
198
+ #mobile-head {
199
+ background: #0F0F0F;
200
+ width: 100%;
201
+ height: 75px;
202
+ z-index: 999;
203
+ position: relative;
204
+ }
205
+
206
+ /* #global-nav スライドアニメーション */
207
+ .open #global-nav {
208
+ /* #global-nav top + #mobile-head height */
209
+ -moz-transform: translateY(556px);
210
+ -webkit-transform: translateY(556px);
211
+ transform: translateY(556px);
212
+ }
213
+
214
+ #nav-toggle {
215
+ display: block;
216
+ position: absolute;
217
+ right: 0px;
218
+ width: 50px;
219
+ height: 75px;
220
+ padding: 25px 15px 0px 0px;
221
+ cursor: pointer;
222
+ z-index: 101;
223
+ }
224
+
225
+ /* #nav-toggle 切り替えアニメーション */
226
+ .open #nav-toggle span:nth-child(1) {
227
+ top: 11px;
228
+ -webkit-transform: rotate(315deg);
229
+ -moz-transform: rotate(315deg);
230
+ transform: rotate(315deg);
231
+ }
232
+
233
+ .open #nav-toggle span:nth-child(2) {
234
+ width: 0;
235
+ left: 50%;
236
+ }
237
+
238
+ .open #nav-toggle span:nth-child(3) {
239
+ top: 11px;
240
+ -webkit-transform: rotate(-315deg);
241
+ -moz-transform: rotate(-315deg);
242
+ transform: rotate(-315deg);
243
+ }
244
+
245
+ #global-nav {
246
+ position: absolute;
247
+ top: -500px;
248
+ background: #333333;
249
+ width: 100%;
250
+ text-align: center;
251
+ -webkit-transition: 0.5s ease-in-out;
252
+ -moz-transition: 0.5s ease-in-out;
253
+ transition: 0.5s ease-in-out;
254
+ }
255
+
256
+ #global-nav ul {
257
+ list-style: none;
258
+ position: static;
259
+ right: 0;
260
+ bottom: 0;
261
+ font-size: 14px;
262
+ }
263
+
264
+ #global-nav ul li {
265
+ float: none;
266
+ position: static;
267
+ border-top: #777777 1px solid;
268
+ }
269
+
270
+ #global-nav ul li:last-child {
271
+ border-bottom: #777777 1px solid;
272
+ }
273
+
274
+ #top-head #global-nav ul li a,
275
+ #top-head.fixed #global-nav ul li a {
276
+ display: block;
277
+ width: 100%;
278
+ padding: 18px 0;
279
+ font-size: 26px;
280
+ color: #D65050;
281
+ letter-spacing: 0.3em;
282
+ }
283
+
284
+ /* #global-nav スライドアニメーション */
285
+ .open #global-nav {
286
+ /* #global-nav top + #mobile-head height */
287
+ -moz-transform: translateY(556px);
288
+ -webkit-transform: translateY(556px);
289
+ transform: translateY(556px);
290
+ }
291
+ コード
292
+ ```
38
293
  よろしくお願いいたします。