teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問質問質問質問質問質問

編集履歴

質問編集履歴

6

修正

2020/03/20 14:51

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 実機からハンバーガーメニューを押しても反応しない
1
+ 質問質問質問質問質問
test CHANGED
@@ -1,197 +1 @@
1
- お世話になっております。
2
-
3
- 表題の件につきまして、質問させていただきます。
4
-
5
-
6
-
7
- ヘッダーは共通化のため、別ファイルととして格納し、
8
-
9
- onloadで読み込んでいる仕様にしております。
10
-
11
- ただし実機（iPhone、Android）からハンバーガーメニューを押してもナビが開きません。
12
-
13
- （なぜか開発ツール（F12）から確認するとナビは開きます）
14
-
15
-
16
-
17
- ※補足
18
-
19
- ・別ファイルから読み込みをやめて、直接ソースを貼り付けると、
1
+ 質問質問質問質問質問質問質問質問質問質問質問質問質問質問質問
20
-
21
- 押下後、問題なくナビが開きます。
22
-
23
- ・コンソール（F12）から確認しましたが、エラーは表示されていません。
24
-
25
-
26
-
27
- ソースは下記になります。
28
-
29
- どなたか、原因をご教示いただけますと幸いです。
30
-
31
-
32
-
33
-
34
-
35
- ●index.html
36
-
37
- ```
38
-
39
- <head>
40
-
41
- <script type="text/javascript" src="script.js"></script>
42
-
43
- </head>
44
-
45
-
46
-
47
- <body>
48
-
49
- <header id="header01">
50
-
51
- <!--ここにheader.htmlを読み込み-->
52
-
53
- </header>
54
-
55
- </body>
56
-
57
- ```
58
-
59
-
60
-
61
-
62
-
63
- ●header.html
64
-
65
- ```
66
-
67
- <div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
68
-
69
- <nav>
70
-
71
- <div class="inner">
72
-
73
- <ul class="gnav">
74
-
75
- <li><a href="index.html">ホーム</a></li>
76
-
77
- <li><a href="company.html">企業情報</a></li>
78
-
79
- </ul>
80
-
81
- </div>
82
-
83
- </nav>
84
-
85
- ```
86
-
87
-
88
-
89
-
90
-
91
- ●script.js
92
-
93
- ```
94
-
95
- $(window).on('load',function(){
96
-
97
- includeHead();
98
-
99
- headerPadding();
100
-
101
- spMenu();
102
-
103
- });
104
-
105
-
106
-
107
- /* ===================================================================
108
-
109
-
110
-
111
- * 共通パーツ読み込み
112
-
113
-
114
-
115
- =================================================================== */
116
-
117
- function includeHead() {
118
-
119
- $("#header01").on('load',"header.html");
120
-
121
- }
122
-
123
-
124
-
125
-
126
-
127
- /* ===================================================================
128
-
129
-
130
-
131
- * ヘッダー・メニューの余白調整
132
-
133
-
134
-
135
- =================================================================== */
136
-
137
- function headerPadding() {
138
-
139
- var headerHeight = $('#header01').outerHeight(true);
140
-
141
- var navHeight = $(window).height() - headerHeight;
142
-
143
- $('body').css({'padding-top' : headerHeight + 'px'});
144
-
145
- $('nav .inner > ul').css({'top' : headerHeight + 'px'});
146
-
147
- if ($('#spMenu').css('display') == 'block') {
148
-
149
- $('nav .inner > ul').css({'max-height' : navHeight + 'px'});
150
-
151
- } else {
152
-
153
- $('nav .inner > ul').css({'max-height' : 'auto'});
154
-
155
- }
156
-
157
- }
158
-
159
-
160
-
161
-
162
-
163
- /* ===================================================================
164
-
165
-
166
-
167
- * スマートフォン用メニューボタンの表示
168
-
169
-
170
-
171
- =================================================================== */
172
-
173
- function spMenu() {
174
-
175
- $(document).on('click', '#spMenu', function(e) {
176
-
177
- $('.gnav').slideToggle(e);
178
-
179
- $('#navBtnIcon').toggleClass('close');
180
-
181
- $('html, body').toggleClass('lock');
182
-
183
- });
184
-
185
- }
186
-
187
-
188
-
189
-
190
-
191
- ```
192
-
193
-
194
-
195
- 以上になります。
196
-
197
- 宜しくお願い致します。

5

JSを修正いたしました。

2020/03/20 14:51

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -39,16 +39,6 @@
39
39
  <head>
40
40
 
41
41
  <script type="text/javascript" src="script.js"></script>
42
-
43
- <script>
44
-
45
- $(function() {
46
-
47
- $("#header01").load("header.html");
48
-
49
- });
50
-
51
- </script>
52
42
 
53
43
  </head>
54
44
 
@@ -102,73 +92,35 @@
102
92
 
103
93
  ```
104
94
 
95
+ $(window).on('load',function(){
96
+
97
+ includeHead();
98
+
99
+ headerPadding();
100
+
101
+ spMenu();
102
+
103
+ });
104
+
105
+
106
+
105
107
  /* ===================================================================
106
108
 
107
109
 
108
110
 
109
- * 読み込み時・リサイズ時処理
111
+ * 共通パーツ読み込み
110
112
 
111
113
 
112
114
 
113
115
  =================================================================== */
114
116
 
115
- $(function($){
117
+ function includeHead() {
116
118
 
117
- var timer = false;
119
+ $("#header01").on('load',"header.html");
118
120
 
119
- var windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
120
-
121
- var nowWidth;
121
+ }
122
122
 
123
123
 
124
-
125
- // 読み込み時処理
126
-
127
- $(window).on('load', function(){
128
-
129
- spMenu();
130
-
131
- subNav();
132
-
133
- headerPadding();
134
-
135
- innerLinkMenu();
136
-
137
- });
138
-
139
-
140
-
141
- // リサイズ時処理
142
-
143
- $(window).on('resize', function(){
144
-
145
- if (timer !== false) {
146
-
147
- clearTimeout(timer);
148
-
149
- }
150
-
151
- timer = setTimeout(function() {
152
-
153
- nowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
154
-
155
- if ( windowWidth != nowWidth ) {
156
-
157
- subNav();
158
-
159
- headerPadding();
160
-
161
- innerLinkMenu();
162
-
163
- windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
164
-
165
- }
166
-
167
- }, 100);
168
-
169
- });
170
-
171
- });
172
124
 
173
125
 
174
126
 
@@ -184,7 +136,7 @@
184
136
 
185
137
  function headerPadding() {
186
138
 
187
- var headerHeight = $('header').outerHeight(true);
139
+ var headerHeight = $('#header01').outerHeight(true);
188
140
 
189
141
  var navHeight = $(window).height() - headerHeight;
190
142
 
@@ -232,77 +184,7 @@
232
184
 
233
185
  }
234
186
 
235
- /* ===================================================================
236
187
 
237
-
238
-
239
- * サブメニューの表示
240
-
241
-
242
-
243
- =================================================================== */
244
-
245
- function subNav() {
246
-
247
- if ($('#spMenu').css('display') == 'block') {
248
-
249
- $('.subnav > a').off().on('click', function(e) {
250
-
251
- e.preventDefault();
252
-
253
- $(this).next('ul').slideToggle();
254
-
255
- $(this).parent().toggleClass('active');
256
-
257
- });
258
-
259
- } else {
260
-
261
- if('ontouchstart' in document) {
262
-
263
- $('.subnav > a').off().on('click', function(e) {
264
-
265
- e.preventDefault();
266
-
267
- });
268
-
269
- }
270
-
271
- }
272
-
273
- }
274
-
275
-
276
-
277
-
278
-
279
- /* ===================================================================
280
-
281
-
282
-
283
- * スマートフォン用メニューの表示・非表示
284
-
285
-
286
-
287
- =================================================================== */
288
-
289
- function innerLinkMenu() {
290
-
291
- $('.gnav a[href^="#"]').on('click', function(e) {
292
-
293
- if($('#spMenu').css('display') == 'block') {
294
-
295
- $('.gnav').slideToggle(e);
296
-
297
- $('#navBtnIcon').toggleClass('close');
298
-
299
- $('html, body').toggleClass('lock');
300
-
301
- }
302
-
303
- });
304
-
305
- }
306
188
 
307
189
 
308
190
 

4

HTMLを更新いたしました。

2019/09/16 04:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -74,15 +74,23 @@
74
74
 
75
75
  ```
76
76
 
77
+ <div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
78
+
79
+ <nav>
80
+
77
- <div id="spMenu"></div>
81
+ <div class="inner">
78
-
82
+
79
- <ul class="gnav">
83
+ <ul class="gnav">
80
-
84
+
81
- <li><a href="index.html">ホーム</a></li>
85
+ <li><a href="index.html">ホーム</a></li>
82
-
86
+
83
- <li><a href="company.html">会社概要</a></li>
87
+ <li><a href="company.html">企業情報</a></li>
84
-
88
+
85
- </ul>
89
+ </ul>
90
+
91
+ </div>
92
+
93
+ </nav>
86
94
 
87
95
  ```
88
96
 

3

JSを修正いたしました。

2019/09/12 15:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -94,24 +94,210 @@
94
94
 
95
95
  ```
96
96
 
97
+ /* ===================================================================
98
+
99
+
100
+
101
+ * 読み込み時・リサイズ時処理
102
+
103
+
104
+
105
+ =================================================================== */
106
+
107
+ $(function($){
108
+
109
+ var timer = false;
110
+
111
+ var windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
112
+
113
+ var nowWidth;
114
+
115
+
116
+
117
+ // 読み込み時処理
118
+
97
- $(window).on('load',function() {
119
+ $(window).on('load', function(){
98
-
120
+
99
- spMenu();
121
+ spMenu();
122
+
123
+ subNav();
124
+
125
+ headerPadding();
126
+
127
+ innerLinkMenu();
128
+
129
+ });
130
+
131
+
132
+
133
+ // リサイズ時処理
134
+
135
+ $(window).on('resize', function(){
136
+
137
+ if (timer !== false) {
138
+
139
+ clearTimeout(timer);
140
+
141
+ }
142
+
143
+ timer = setTimeout(function() {
144
+
145
+ nowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
146
+
147
+ if ( windowWidth != nowWidth ) {
148
+
149
+ subNav();
150
+
151
+ headerPadding();
152
+
153
+ innerLinkMenu();
154
+
155
+ windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
156
+
157
+ }
158
+
159
+ }, 100);
160
+
161
+ });
100
162
 
101
163
  });
102
164
 
103
165
 
104
166
 
167
+ /* ===================================================================
168
+
169
+
170
+
171
+ * ヘッダー・メニューの余白調整
172
+
173
+
174
+
175
+ =================================================================== */
176
+
177
+ function headerPadding() {
178
+
179
+ var headerHeight = $('header').outerHeight(true);
180
+
181
+ var navHeight = $(window).height() - headerHeight;
182
+
183
+ $('body').css({'padding-top' : headerHeight + 'px'});
184
+
185
+ $('nav .inner > ul').css({'top' : headerHeight + 'px'});
186
+
187
+ if ($('#spMenu').css('display') == 'block') {
188
+
189
+ $('nav .inner > ul').css({'max-height' : navHeight + 'px'});
190
+
191
+ } else {
192
+
193
+ $('nav .inner > ul').css({'max-height' : 'auto'});
194
+
195
+ }
196
+
197
+ }
198
+
199
+
200
+
201
+
202
+
203
+ /* ===================================================================
204
+
205
+
206
+
207
+ * スマートフォン用メニューボタンの表示
208
+
209
+
210
+
211
+ =================================================================== */
212
+
105
213
  function spMenu() {
106
214
 
107
- $('#spMenu').on('click', function(e) {
215
+ $(document).on('click', '#spMenu', function(e) {
108
-
216
+
109
- $('.gnav').slideToggle(e);
217
+ $('.gnav').slideToggle(e);
218
+
219
+ $('#navBtnIcon').toggleClass('close');
220
+
221
+ $('html, body').toggleClass('lock');
222
+
223
+ });
224
+
225
+ }
226
+
227
+ /* ===================================================================
228
+
229
+
230
+
231
+ * サブメニューの表示
232
+
233
+
234
+
235
+ =================================================================== */
236
+
237
+ function subNav() {
238
+
239
+ if ($('#spMenu').css('display') == 'block') {
240
+
241
+ $('.subnav > a').off().on('click', function(e) {
242
+
243
+ e.preventDefault();
244
+
245
+ $(this).next('ul').slideToggle();
246
+
247
+ $(this).parent().toggleClass('active');
248
+
249
+ });
250
+
251
+ } else {
252
+
253
+ if('ontouchstart' in document) {
254
+
255
+ $('.subnav > a').off().on('click', function(e) {
256
+
257
+ e.preventDefault();
258
+
259
+ });
260
+
261
+ }
262
+
263
+ }
264
+
265
+ }
266
+
267
+
268
+
269
+
270
+
271
+ /* ===================================================================
272
+
273
+
274
+
275
+ * スマートフォン用メニューの表示・非表示
276
+
277
+
278
+
279
+ =================================================================== */
280
+
281
+ function innerLinkMenu() {
282
+
283
+ $('.gnav a[href^="#"]').on('click', function(e) {
284
+
285
+ if($('#spMenu').css('display') == 'block') {
286
+
287
+ $('.gnav').slideToggle(e);
288
+
289
+ $('#navBtnIcon').toggleClass('close');
290
+
291
+ $('html, body').toggleClass('lock');
292
+
293
+ }
110
294
 
111
295
  });
112
296
 
113
297
  }
114
298
 
299
+
300
+
115
301
  ```
116
302
 
117
303
 

2

2019/09/12 15:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -94,6 +94,14 @@
94
94
 
95
95
  ```
96
96
 
97
+ $(window).on('load',function() {
98
+
99
+ spMenu();
100
+
101
+ });
102
+
103
+
104
+
97
105
  function spMenu() {
98
106
 
99
107
  $('#spMenu').on('click', function(e) {

1

2019/09/12 04:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -37,6 +37,8 @@
37
37
  ```
38
38
 
39
39
  <head>
40
+
41
+ <script type="text/javascript" src="script.js"></script>
40
42
 
41
43
  <script>
42
44