ブラウザボタン使用時にハンバーガメニューが開いた状態になってしまいます

前提・実現したいこと

ヘッダーの左上にハンバーガーメニューを実装したい。

発生している問題・エラーメッセージ

ブラウザの「戻る」「進む」ボタンを使った時にメニューが開いたままになります。（Safari,Chrome使用）
ページの読み込み時にメニューを閉じた状態にしておきたいので、解決方法を教えていただければありがたいです。よろしくお願いします。

cssに関する知識が薄く、以下のページを参考にして作成しました。
https://spmenucss.imagecontrol.jp

該当のソースコード

CSS
1header {
2	width:100%;
3	height:100px;
4	position:fixed;
5	background-color: rgba(255,255,255,0.6);
6	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
7	z-index:2;
8}
9header h1 {
10	padding-top:9px;
11}
12.btn_cart {
13	right:20px;
14	top:29px;
15	background: url(images/sp-cart1.svg) no-repeat;
16}
17.btn_cart a {
18	width:42px;
19	height:42px;
20	background: url(images/sp-cart1.svg) no-repeat;
21}
22.btn_cart a:hover {
23	background-image: url(images/sp-cart2.svg);
24}
25#container {
26	width:100%;
27  	padding-top:100px;
28}
29#sp-topslider{
30	width:100%;
31}
32	/****メニュー全体****/
33#sp-menu{
34	/*配置*/
35	position:fixed;
36	width: 100%;
37	height: 100%;
38	pointer-events: none;
39	z-index: 3;
40}
41/****メニュー開閉ボタン****/
42#sp-menu div{
43	/*デザイン*/
44	width: 28px;
45	height: 30px;
46	/*配置*/
47	overflow: hidden;
48	position: absolute;
49	top:30px;
50	left:20px;
51}
52#sp-menu .menuopen{
53	display: block;
54	width: 100%;
55	height: 100%;
56	position: absolute;
57	top: 0;
58	left: 0;
59	pointer-events: auto;
60}
61#panel-btn-icon{
62	display: block;
63	position: absolute;
64	top: 50%;
65	left: 0;
66	width: 28px;
67	height: 2px;
68	background: #5a3932;
69}
70#panel-btn-icon:before, #panel-btn-icon:after{
71	display: block;
72	content: "";
73	position: absolute;
74	top: 50%;
75	width: 28px;
76	height: 2px;
77	background: #5a3932;
78}
79#panel-btn-icon:before{
80	margin-top: -10px;
81}
82#panel-btn-icon:after{
83	margin-top: 8px;
84}
85#sp-menu .menuclose{
86	display: none;
87}
88/****メニュー一覧****/
89#sp-menu ul{
90	background: rgba(219,208,198,0.8);
91	width: 60%;
92	position: absolute;
93	top: 60px;/*#menu divの高さ*/
94	left:20px;
95}
96#sp-menu li{
97	-webkit-transition: all 0.3s ease 0s;
98	transition: all 0.3s ease 0s;
99	height: 0;
100	padding: 0 20px;
101	overflow: hidden;
102	pointer-events: auto;
103}
104#sp-menu li a{
105	color:#5a3932;
106}
107/****メニューオープン時****/
108#sp-menu:target .menuopen{
109	display: none;
110}
111#sp-menu:target .menuclose{
112	display: block;
113	position:absolute;
114	width: 100%;
115	height: 100%;
116	top: 0;
117	left: 0;
118	pointer-events: auto;
119}
120#sp-menu .menuclose span{
121	position: relative;
122  	width: 24px;
123  	height: 24px;
124}
125#sp-menu .menuclose span::before,
126#sp-menu .menuclose span::after{
127	position: absolute;
128	top:14px;
129  	left: 2px;
130  	content: "";
131  	display: block;
132  	width: 24px;
133  	border-top: 2px solid #5a3932;
134}
135#sp-menu .menuclose span::before{
136	transform: skewY(-45deg);
137}
138#sp-menu .menuclose span::after{
139	transform: skewY(45deg);
140}
141#sp-menu:target li{
142	padding: 10px 20px;
143	height: 30px;
144}
145#sp-menu:target li:first-child{
146	padding-top:20px;
147}
148#sp-menu:target li:last-child{
149	padding-bottom:30px;
150}
151#sp-menu:target li a{
152	color:#5a3932;
153}
154#sp-menu:target ~ #main{
155	-webkit-filter:brightness(70%);
156	-moz-filter:brightness(70%);
157	-ms-filter:brightness(70%);
158	filter:brightness(70%);
159}

html
1<body>
2<div id="sp-menu" class="sp">
3		<div><a href="#sp-menu" class="menuopen"><span id="panel-btn-icon"></span></a><a href="#close" class="menuclose"><span></span></a></div>
4		<ul>
5		<li><a href="">menu1</a></li>
6		<li><a href="">menu2</a></li>
7		<li><a href="">menu3</a></li>
8		<li><a href="">menu4</a></li>
9        </ul>
10	</div>
11    <div id="main">
12<header>

試したこと

補足情報（FW/ツールのバージョンなど）

動作は以下で確認しています。
macOS 10.13.16:Safari,Chrome
iPhoneX:Safari

退会済みユーザー

2020/02/11 06:14

つ https://developer.mozilla.org/ja/docs/Web/API/WindowEventHandlers/onpopstate

kino_

2020/02/11 06:22

すみません。初めての利用でよくわかっていないのですが、どのような追記が必要でしょうか。

退会済みユーザー

2020/02/11 16:26 編集

こんばんは。当方で(下記リンク)確認してみたのですが、その様な事は確認できませんでした。インデント・空白に関しては不必要なところなどが多く感じました。 <div id="main">では、終了タグが見つからなかったのですが、それは想定していますか? 上記の点も修正しておきましたのでご確認ください。 (本質問とは直接の関係はありませんので、目についた部分だけ修正しました。) https://codepen.io/kai0310/pen/vYOOqNV

kino_

2020/02/11 17:35 編集

回答いただきありがとうございます。不要な部分についてもご指摘いただきありがとうございます。 <div id="main">の終了タグは、footer.php内に記しています。説明不足ですみません。ご指摘を踏まえて、当方の環境で他サイトをいくつか確認してみたところ、同じ現象が起こりました。ただ、一定時間を置いて確認すると、この現象は起きないようです。（最初に回答いただいたURLにもこのことが書かれていたのでしょうか）おそらく…ですが、いただいたご指摘を元に納得できましたので、解決とさせていただきます。 -apple-さんにベストアンサーを付けたいのですが、回答欄に記入をお願いすれば良いでしょうか。

退会済みユーザー

2020/02/12 03:38

すいません。今確認しました。自己解決という方法もありますが、要望通り改めて回答しておきます。

行動規範の内容に同意します

回答1件

ベストアンサー

質問への追記・修正より、

-apple-

2020/02/12 01:23 編集
こんばんは。
当方で(下記リンク)確認してみたのですが、その様な事は確認できませんでした。
インデント・空白に関しては不必要なところなどが多く感じました。

<div id="main">では、終了タグが見つからなかったのですが、それは想定していますか? 上記の点も修正しておきましたのでご確認ください。 (本質問とは直接の関係はありませんので、目についた部分だけ修正しました。) https://codepen.io/kai0310/pen/vYOOqNV

CSSだけで、実装するのでなく、JavaScriptも使って実装するとそのような挙動はなくなると思います。

投稿2020/02/12 03:42

退会済みユーザー

総合スコア0