ハンバーガーメニューの修正 open時の内容が表示されなくなってしまった。

前提・実現したいこと

ハンバーガーメニューの修正。
open時の内容が表示されなくなってしまいました。

制作時の参考サイト

レスポンシブでハンバーガーメニューになる固定サイドバー
 demoページ

試したこと

下記ページを参考に、複数読み込みされてないか、パスの確認などを行いました。
ハンバーガーメニューが急に動かなくなった！初心者向け解決法

また、通販カートシステムを使用しているページの為、フォーム入力から上書きされていないか、
他システムのファイルと干渉していないか自分なりに調べましたが、知識不足というのもあり、
解決できませんでした。

どなたか、ご教授ください。。！！とても困っております。
↓とても長いのですが、原因が不明なので、、
何卒宜しくお願いします。

該当のソースコード

html
1<div id="sps-header-common-fixed">
2<div id="header"><div id="sps-menu">
3<div id="headLeft">
4<div id="headLeftTop">
5<div id="logo">
6<p><a href="#"><img src="header_logo.gif" alt="" height="65" width="325"></a></p>
7</div>
8<div id="tel">
9<p><span class="tel-link"><a href="tel:"><img src="img/head/header_tel.gif" alt="" height="80" width="270"></a></span></p>
10</div>
11<div id="souryou">
12<p><img src="/souryou.gif" alt="" height="80" width="198"></p>
13</div>
14</div>
15<div id="headLeftBottom">
16<div id="h1Zone">
17<h1></h1>
18</div>
19<div id="smallNavi">
20<a href="/guide.html">111</a>｜
21<a href="/company.html">222</a>｜
22<a href="/list.html">333</a>｜
23<a onclick="javascript:openPage('FORM/contact.cgi','form'); return false;" href="FORM/contact.cgi" title=""></a>｜
24<a onclick="window.open('CART/login.php', '', 'width=640,height=480');"><img class="mypage-icon" src="pic-labo/navi-06.gif">ページ</a>｜
25</div>
26</div>
27</div>
28<div class="header-nav sp">
29<p><a href="tel:"><img src="tel.png" alt="" style="width: 100%;"></a></p>
30<p id="nav-toggle"><img src="menu.png" alt="menu" style="width: 100%;">
31</p>
32<div id="overlay"></div>
33</div>
34<div id="headRight">
35<p><a href="tenpo-all.html"><img src="img/head/header_tenpo.jpg" width="142" height="52" alt=""></a></p>
36<p id="imageLast"><a class="header-cart" onclick="javascript:goCart();return false;" href="_ga/cart.php" title=""><img src="img/head/header_cart.jpg" alt="" height="52" width="142"></a></p>
37</div>
38</div>
39</div>
40</div>
41
42
43<div id="sidebar" class="free-contents" style="margin-left:0;"><!--スマホハンバーガーメニュー表示部分-->
44<a class="header-cart sp" onclick="javascript:goCart();return false;" href="cart.php" title="カートをみる">
45 <span class="cart_icon"></span>カートをみる<span class="arw_icon"></span></a><!--スマホカートボタン-->
46
47<div class="sidr-search sp"><!--スマホ検索ボックス-->
48		<form method="get" action="/list.php">
49                      <div class="form-group"><input type="text" name="Search" value="" data-prompt-position="inline" class="searchbox"></div><input type="submit" value="検索" data-prompt-position="inline"><input type="hidden" name="type" value="search" data-prompt-position="inline"></form></div>
50
51
52</div>
53
54
55
56
57<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
58<script type="text/javascript" src="js/sp_common.js"></script>
59

css
1/* ハンバーガーメニュー */
2#global-head {
3	position: fixed;
4	color: #033560;
5	width: 260px;
6	text-align: center;
7	padding-top: 60px;
8	z-index: 100;
9}
10
11
12#global-nav ul {
13	list-style: none;
14	margin-left: 0;
15}
16#global-nav > ul > li {
17	position: relative;
18}
19
20#global-nav a {
21	color: #033560;
22	text-decoration: none;
23	display: block;
24	padding: 15px 0;
25	-moz-transition: background-color .3s linear;
26	-webkit-transition: background-color .3s linear;
27	transition: background-color .3s linear;
28}
29#global-nav .sub-menu.is-active > a,
30#global-nav a:hover {
31	color: #fff;
32	background: #033560;
33}
34
35#global-nav .sub-menu-nav a,
36#global-nav .sub-menu:hover .sub-menu-nav {
37	width: 230px;
38}
39
40/* sub-menu icon */
41#global-nav .sub-menu-head {
42	position: relative;
43}
44#global-nav .sub-menu-head:after {
45	content: "";
46	position: absolute;
47	top: 0;
48	bottom: 0;
49	right: 18px;
50	margin: auto;
51	vertical-align: middle;
52	width: 8px;
53	height: 8px;
54	border-top: 1px solid #033560;
55	border-right: 1px solid #033560;
56	-moz-transform: rotate(45deg);
57	-webkit-transform: rotate(45deg);
58	transform: rotate(45deg);
59}
60
61
62/* sub-menu */
63#global-nav .sub-menu-nav {
64	position: fixed;
65	background: #033560;
66	color: #fff;
67	top: 0;
68	padding-top: 90px;
69	left: 260px;
70	width: 0;
71	height: 100%;
72	overflow: hidden;
73
74	-moz-transition: width .2s ease-out;
75	-webkit-transition: width .2s ease-out;
76	transition: width .2s ease-out;
77}
78#global-nav .sub-menu.is-active > a:after,
79#global-nav .sub-menu-head:hover:after {
80	border-color: #fff;
81}
82#global-nav .sub-menu-nav a {
83	color: #fff;
84}
85#global-nav .sub-menu-nav a:hover {
86	color: #033560;
87	background: #fff;
88}
89
90
91/* nav-toggle */
92
93#nav-toggle > div {
94	position: relative;
95	width: 32px;
96}
97#nav-toggle span {
98	width: 100%;
99	height: 2px;
100	left: 0;
101	display: block;
102	background: #033560;
103	position: absolute;
104	-webkit-transition: .35s ease-in-out;
105	-moz-transition: .35s ease-in-out;
106	transition: .35s ease-in-out;
107}
108
109#nav-toggle span:nth-child(1) {
110	top: 0;
111}
112#nav-toggle span:nth-child(2) {
113	top: 11px;
114}
115#nav-toggle span:nth-child(3) {
116	top: 22px;
117}
118
119
120#overlay {
121	display: none;
122	position: fixed;
123	background: rgba(0,0,0,.6);
124	width: 100%;
125	height: 100%;
126	top: 0;
127	left: 0;
128	right: 0;
129	bottom: 0;
130}
131
132
133
134
135	#main-in {
136		padding-left: 0;
137	}
138
139	#global-head {
140		width: 100%;
141		padding: 10px;
142		background: rgba(255,255,255,.8);
143		display: -webkit-flex;
144		display: flex;
145	}
146
147
148	/* サブメニューは開けない */
149	#global-nav .sub-menu-head:after,
150	#global-nav .sub-menu-nav {
151		display: none;
152	}
153	#nav-toggle {
154		display: block;
155	}
156
157	/* nav open */
158	.open {
159		/* overflow: hidden; */
160	}
161	.open #overlay {
162		display: block;
163	}
164	
165
166	/* #nav-toggle close */
167	.open #nav-toggle span:nth-child(1) {
168		top: 11px;
169		-webkit-transform: rotate(45deg);
170		-moz-transform: rotate(45deg);
171		transform: rotate(45deg);
172	}
173	.open #nav-toggle span:nth-child(2) {
174		width: 0;
175		left: 50%;
176	}
177	.open #nav-toggle span:nth-child(3) {
178		top: 11px;
179		-webkit-transform: rotate(-45deg);
180		-moz-transform: rotate(-45deg);
181		transform: rotate(-45deg);
182	}
183
184	/* z-index */
185	#overlay {
186		z-index: 200;
187	}
188	#sidebar {
189    z-index: 99999;
190}
191
192
193
194#sidebar {
195    right: -230px;
196    width: 220px;
197    padding-top: 0;
198    overflow: auto;
199    overflow-scrolling: touch;
200    position: fixed;
201    top: 0;
202    height: 100%;
203    color: #333;
204    background: #fff;
205    -webkit-transition: .35s ease-in-out;
206    transition: .35s ease-in-out;
207    padding-left: 10px;
208}
209
210
211	.open #sidebar  {
212		-webkit-transform: translate3d(-230px,0,0);
213		transform: translate3d(-230px,0,0);
214	}
215
216
217#overlay::after {
218    content: "";
219    width: 30px;
220    height: 30px;
221    background: url(btn_close.png) no-repeat top center;
222    background-size: contain;
223    position: absolute;
224    top: 18px;
225    right: 240px;
226}
227
228
229
230

js
1
2(function($) {
3    $(function () {
4        $('.sub-menu').on({
5            'mouseenter': function () {
6                $(this).addClass('is-active');
7            },
8            'mouseleave': function () {
9                $(this).removeClass('is-active');
10            }
11        });
12        $('#nav-toggle,#overlay').on('click', function() {
13            $('body').toggleClass('open');
14        });
15    });
16})(jQuery);
17

Lhankor_Mhy

2020/12/25 09:15

ご提示のコードを試してみましたが、open時の内容（カートをみる、など）は表示されていました。つまり、問題が再現しませんでした。おそらく、ご提示いただいていない部分のコードが原因かもしれません。問題が再現するコードをご提示ください。

退会済みユーザー

2020/12/26 00:40

早速のご回答ありがとうございます！おかげで別のところに原因があることが発覚しました。レスポンシブ化を進めており、別箇所を対応中に、誤ってdisplay: none;にしてしまっていたという初歩的なミスでした。。とても丁寧でご回答くださりありがとうございました。大変途方に暮れていましたが、おかげさまで解決できました。

Lhankor_Mhy

2020/12/26 00:42

ご解決されて何よりです。

退会済みユーザー

2020/12/26 00:44

ありがとうございます！m(_ _)m