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

編集履歴

質問編集履歴

6

修正

2020/03/20 14:51

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 実機からハンバーガーメニューを押しても反応しない
1
+ 質問質問質問質問質問
body CHANGED
@@ -1,99 +1,1 @@
1
- お世話になっております。
2
- 表題の件につきまして、質問させていただきます。
3
-
4
- ヘッダーは共通化のため、別ファイルととして格納し、
5
- onloadで読み込んでいる仕様にしております。
6
- ただし実機（iPhone、Android）からハンバーガーメニューを押してもナビが開きません。
7
- （なぜか開発ツール（F12）から確認するとナビは開きます）
8
-
9
- ※補足
10
- ・別ファイルから読み込みをやめて、直接ソースを貼り付けると、
1
+ 質問質問質問質問質問質問質問質問質問質問質問質問質問質問質問
11
- 押下後、問題なくナビが開きます。
12
- ・コンソール（F12）から確認しましたが、エラーは表示されていません。
13
-
14
- ソースは下記になります。
15
- どなたか、原因をご教示いただけますと幸いです。
16
-
17
-
18
- ●index.html
19
- ```
20
- <head>
21
- <script type="text/javascript" src="script.js"></script>
22
- </head>
23
-
24
- <body>
25
- <header id="header01">
26
- <!--ここにheader.htmlを読み込み-->
27
- </header>
28
- </body>
29
- ```
30
-
31
-
32
- ●header.html
33
- ```
34
- <div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
35
- <nav>
36
- <div class="inner">
37
- <ul class="gnav">
38
- <li><a href="index.html">ホーム</a></li>
39
- <li><a href="company.html">企業情報</a></li>
40
- </ul>
41
- </div>
42
- </nav>
43
- ```
44
-
45
-
46
- ●script.js
47
- ```
48
- $(window).on('load',function(){
49
- includeHead();
50
- headerPadding();
51
- spMenu();
52
- });
53
-
54
- /* ===================================================================
55
-
56
- * 共通パーツ読み込み
57
-
58
- =================================================================== */
59
- function includeHead() {
60
- $("#header01").on('load',"header.html");
61
- }
62
-
63
-
64
- /* ===================================================================
65
-
66
- * ヘッダー・メニューの余白調整
67
-
68
- =================================================================== */
69
- function headerPadding() {
70
- var headerHeight = $('#header01').outerHeight(true);
71
- var navHeight = $(window).height() - headerHeight;
72
- $('body').css({'padding-top' : headerHeight + 'px'});
73
- $('nav .inner > ul').css({'top' : headerHeight + 'px'});
74
- if ($('#spMenu').css('display') == 'block') {
75
- $('nav .inner > ul').css({'max-height' : navHeight + 'px'});
76
- } else {
77
- $('nav .inner > ul').css({'max-height' : 'auto'});
78
- }
79
- }
80
-
81
-
82
- /* ===================================================================
83
-
84
- * スマートフォン用メニューボタンの表示
85
-
86
- =================================================================== */
87
- function spMenu() {
88
- $(document).on('click', '#spMenu', function(e) {
89
- $('.gnav').slideToggle(e);
90
- $('#navBtnIcon').toggleClass('close');
91
- $('html, body').toggleClass('lock');
92
- });
93
- }
94
-
95
-
96
- ```
97
-
98
- 以上になります。
99
- 宜しくお願い致します。

5

JSを修正いたしました。

2020/03/20 14:51

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -19,11 +19,6 @@
19
19
  ```
20
20
  <head>
21
21
  <script type="text/javascript" src="script.js"></script>
22
- <script>
23
- $(function() {
24
- $("#header01").load("header.html");
25
- });
26
- </script>
27
22
  </head>
28
23
 
29
24
  <body>
@@ -50,48 +45,29 @@
50
45
 
51
46
  ●script.js
52
47
  ```
48
+ $(window).on('load',function(){
49
+ includeHead();
50
+ headerPadding();
51
+ spMenu();
52
+ });
53
+
53
54
  /* ===================================================================
54
55
 
55
- * 読み込み時・リサイズ時処理
56
+ * 共通パーツ読み込み
56
57
 
57
58
  =================================================================== */
58
- $(function($){
59
+ function includeHead() {
59
- var timer = false;
60
- var windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
60
+ $("#header01").on('load',"header.html");
61
- var nowWidth;
61
+ }
62
62
 
63
- // 読み込み時処理
64
- $(window).on('load', function(){
65
- spMenu();
66
- subNav();
67
- headerPadding();
68
- innerLinkMenu();
69
- });
70
63
 
71
- // リサイズ時処理
72
- $(window).on('resize', function(){
73
- if (timer !== false) {
74
- clearTimeout(timer);
75
- }
76
- timer = setTimeout(function() {
77
- nowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
78
- if ( windowWidth != nowWidth ) {
79
- subNav();
80
- headerPadding();
81
- innerLinkMenu();
82
- windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
83
- }
84
- }, 100);
85
- });
86
- });
87
-
88
64
  /* ===================================================================
89
65
 
90
66
  * ヘッダー・メニューの余白調整
91
67
 
92
68
  =================================================================== */
93
69
  function headerPadding() {
94
- var headerHeight = $('header').outerHeight(true);
70
+ var headerHeight = $('#header01').outerHeight(true);
95
71
  var navHeight = $(window).height() - headerHeight;
96
72
  $('body').css({'padding-top' : headerHeight + 'px'});
97
73
  $('nav .inner > ul').css({'top' : headerHeight + 'px'});
@@ -115,43 +91,8 @@
115
91
  $('html, body').toggleClass('lock');
116
92
  });
117
93
  }
118
- /* ===================================================================
119
94
 
120
- * サブメニューの表示
121
95
 
122
- =================================================================== */
123
- function subNav() {
124
- if ($('#spMenu').css('display') == 'block') {
125
- $('.subnav > a').off().on('click', function(e) {
126
- e.preventDefault();
127
- $(this).next('ul').slideToggle();
128
- $(this).parent().toggleClass('active');
129
- });
130
- } else {
131
- if('ontouchstart' in document) {
132
- $('.subnav > a').off().on('click', function(e) {
133
- e.preventDefault();
134
- });
135
- }
136
- }
137
- }
138
-
139
-
140
- /* ===================================================================
141
-
142
- * スマートフォン用メニューの表示・非表示
143
-
144
- =================================================================== */
145
- function innerLinkMenu() {
146
- $('.gnav a[href^="#"]').on('click', function(e) {
147
- if($('#spMenu').css('display') == 'block') {
148
- $('.gnav').slideToggle(e);
149
- $('#navBtnIcon').toggleClass('close');
150
- $('html, body').toggleClass('lock');
151
- }
152
- });
153
- }
154
-
155
96
  ```
156
97
 
157
98
  以上になります。

4

HTMLを更新いたしました。

2019/09/16 04:38

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -36,11 +36,15 @@
36
36
 
37
37
  ●header.html
38
38
  ```
39
+ <div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
40
+ <nav>
39
- <div id="spMenu"></div>
41
+ <div class="inner">
40
- <ul class="gnav">
42
+ <ul class="gnav">
41
- <li><a href="index.html">ホーム</a></li>
43
+ <li><a href="index.html">ホーム</a></li>
42
- <li><a href="company.html">会社概要</a></li>
44
+ <li><a href="company.html">企業情報</a></li>
43
- </ul>
45
+ </ul>
46
+ </div>
47
+ </nav>
44
48
  ```
45
49
 
46
50
 

3

JSを修正いたしました。

2019/09/12 15:47

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -46,15 +46,108 @@
46
46
 
47
47
  ●script.js
48
48
  ```
49
+ /* ===================================================================
50
+
51
+ * 読み込み時・リサイズ時処理
52
+
53
+ =================================================================== */
54
+ $(function($){
55
+ var timer = false;
56
+ var windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
57
+ var nowWidth;
58
+
59
+ // 読み込み時処理
49
- $(window).on('load',function() {
60
+ $(window).on('load', function(){
50
- spMenu();
61
+ spMenu();
62
+ subNav();
63
+ headerPadding();
64
+ innerLinkMenu();
65
+ });
66
+
67
+ // リサイズ時処理
68
+ $(window).on('resize', function(){
69
+ if (timer !== false) {
70
+ clearTimeout(timer);
71
+ }
72
+ timer = setTimeout(function() {
73
+ nowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
74
+ if ( windowWidth != nowWidth ) {
75
+ subNav();
76
+ headerPadding();
77
+ innerLinkMenu();
78
+ windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
79
+ }
80
+ }, 100);
81
+ });
51
82
  });
52
83
 
84
+ /* ===================================================================
85
+
86
+ * ヘッダー・メニューの余白調整
87
+
88
+ =================================================================== */
89
+ function headerPadding() {
90
+ var headerHeight = $('header').outerHeight(true);
91
+ var navHeight = $(window).height() - headerHeight;
92
+ $('body').css({'padding-top' : headerHeight + 'px'});
93
+ $('nav .inner > ul').css({'top' : headerHeight + 'px'});
94
+ if ($('#spMenu').css('display') == 'block') {
95
+ $('nav .inner > ul').css({'max-height' : navHeight + 'px'});
96
+ } else {
97
+ $('nav .inner > ul').css({'max-height' : 'auto'});
98
+ }
99
+ }
100
+
101
+
102
+ /* ===================================================================
103
+
104
+ * スマートフォン用メニューボタンの表示
105
+
106
+ =================================================================== */
53
107
  function spMenu() {
54
- $('#spMenu').on('click', function(e) {
108
+ $(document).on('click', '#spMenu', function(e) {
55
- $('.gnav').slideToggle(e);
109
+ $('.gnav').slideToggle(e);
110
+ $('#navBtnIcon').toggleClass('close');
111
+ $('html, body').toggleClass('lock');
112
+ });
113
+ }
114
+ /* ===================================================================
115
+
116
+ * サブメニューの表示
117
+
118
+ =================================================================== */
119
+ function subNav() {
120
+ if ($('#spMenu').css('display') == 'block') {
121
+ $('.subnav > a').off().on('click', function(e) {
122
+ e.preventDefault();
123
+ $(this).next('ul').slideToggle();
124
+ $(this).parent().toggleClass('active');
125
+ });
126
+ } else {
127
+ if('ontouchstart' in document) {
128
+ $('.subnav > a').off().on('click', function(e) {
129
+ e.preventDefault();
130
+ });
131
+ }
132
+ }
133
+ }
134
+
135
+
136
+ /* ===================================================================
137
+
138
+ * スマートフォン用メニューの表示・非表示
139
+
140
+ =================================================================== */
141
+ function innerLinkMenu() {
142
+ $('.gnav a[href^="#"]').on('click', function(e) {
143
+ if($('#spMenu').css('display') == 'block') {
144
+ $('.gnav').slideToggle(e);
145
+ $('#navBtnIcon').toggleClass('close');
146
+ $('html, body').toggleClass('lock');
147
+ }
56
148
  });
57
149
  }
150
+
58
151
  ```
59
152
 
60
153
  以上になります。

2

2019/09/12 15:28

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -46,6 +46,10 @@
46
46
 
47
47
  ●script.js
48
48
  ```
49
+ $(window).on('load',function() {
50
+ spMenu();
51
+ });
52
+
49
53
  function spMenu() {
50
54
  $('#spMenu').on('click', function(e) {
51
55
  $('.gnav').slideToggle(e);

1

2019/09/12 04:13

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -18,6 +18,7 @@
18
18
  ●index.html
19
19
  ```
20
20
  <head>
21
+ <script type="text/javascript" src="script.js"></script>
21
22
  <script>
22
23
  $(function() {
23
24
  $("#header01").load("header.html");