iphone13で縦に見たときにドロワーメニューが表示されないので表示させたい

前提

スマホで下記のサイトをみた時に横向きだと表示されるのに縦だとドロワーメニューの項目が出てきません。　

エステ

色々調べてＰＣで画面サイズ変えて表示できていたので問題ないと思ったら自分のiphone13だと縦でみたとき、メニューを押しても出てこなかったのでコードで何がおかしいか教えて頂けないでしょうか？　

現状、スマホで表示させるためにメディアクエリで768px以下で指定していますが
ブラウザでしか反映されなくて、スマホだと横表示のみドロワーメニューの項目が出る状態です。

サイト自体が古く元は画像メニューにしてたので、最近のドロワーメニューにして少々、ＣＳＳがややこしくなってます。

※main.cssでコメントアウトしている部分はドロワーメニューで背景の画像を表示させないためです。

当初、ＰＣでメニューのhoverがなめらかに表示させるために画像を入れてましたがそれをコメントアウトしています。

実現したいこと

スマホで縦に見たときにハンバーガーメニューの項目を表示させたい。

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


スマホで縦に見たときにハンバーガーアイコンは動くがドロワーメニューが表示されない。

該当のソースコード

main.css
1
2
3
4
5/*
6
7div.hoverBtn {
8    width:200px; 
9	position: relative;
10	float: left;
11	background:black url(../images/button_back_02.png) repeat-x 0 0 scroll;
12		
13}
14
15*/
16
17
18
19@media only screen and (max-width: 479px) {
20
21 div.hoverBtn {
22 		background:#333;
23		filter:alpha(opacity=100);
24		-moz-opacity: 1;
25		opacity: 1;
26
27}
28
29}
30
31div.hoverBtn a {
32	position: relative;
33	z-index: 2;
34	display: block;
35	width: 200px;
36	height: 50px;
37	line-height: 30px;
38	text-align: center;
39	font-size: 1.1em;
40	text-decoration: none;
41	color:#babf8d;
42	font-weight:600;
43	background:	transparent none repeat-x 0 0 scroll;
44}
45
46
47/*
48
49div.hoverBtn a:hover{
50	background:	white url(../images/navHover.png) repeat-x 0 0 scroll;
51	
52
53}
54
55div.hoverBtn div{
56	display:none;
57	position: absolute;
58	z-index: 1;
59	top: 0px;
60	background:	white url(../images/navHover.png) repeat-x 0 0 scroll;
61	
62}
63
64
65*/
66
67
68@media only screen and (max-width: 479px) {
69
70	div.hoverBtn a:hover {
71			background:#ecedc9 0 0 scroll;
72			  filter:alpha(opacity=100);
73			-moz-opacity: 1;
74			opacity: 1;
75	}
76
77	div.hoverBtn div{
78			background:#ecedc9 0 0 scroll;
79	
80}
81
82}
83
84
85h1 {
86	font-size:		2.0em;
87	margin:			0.5em 0;
88}
89p {
90	padding-top:	10px;
91	margin:			0.5em 0;
92}
93
94.clear	{ clear: both; }
95
96html, body { height: 100%; margin-bottom: 1px; }
97
98
99
100
101#menu{
102	  width: 100%;
103	  max-width: 1000px;
104	  margin: 0 auto;
105	  padding: 0;
106	 
107}
108
109#menu li{
110	  max-width:20%;
111	  display: block;
112	  float: left;
113	  margin: 0;
114	  padding: 0; 
115	  overflow: hidden;
116}
117
118#menu li img{
119		border: none; 
120		max-width: 100% ;
121		height: auto ;	
122}
123
124#menu li a{
125
126  display: block;
127
128  padding:0;
129
130  background: transparent none repeat-x 0 0 scroll;
131
132  color:#fff;
133
134  text-align: center;
135
136  text-decoration: none;
137
138  position: relative;
139	
140　z-index: 2;
141}
142
143
144
145
146#menu li a:hover{
147
148	background:	white url(../images/navHover.png) repeat-x 0 0 scroll;
149	
150}
151
152
153
154
155
156
157
158@media only screen and (max-width: 479px) {
159
160  #menu{
161    	display: none;
162	position:absolute;
163	z-index:2;
164	
165  }
166
167  #menu li{
168    	max-width:100%;
169	height:30px;
170	float:none;
171
172  }
173  
174  #menu li img {
175  		display:none;
176	}
177	
178  #menu li a{
179  	    font-size:11px;
180		left:2px;
181  
182  }
183  
184  #menu li a:hover{
185	background:#ecedc9 0 0 scroll;
186	
187}
188
189
190
191
192
193
194}
195
196
197
198
199
200/* スマホだけに適用するCSS */
201@media screen and (max-width:768px){
202
203
204#right_contents {
205	width:100%;
206	height:auto;
207	min-height:100%;
208	margin:0;
209	display:block;
210	background:#281503;
211	box-shadow:0 2px 9px #fff;
212	clear:both;
213	
214}
215
216
217#left_box {
218	width:100%;
219	height:100%;
220	min-height:100%;
221	margin:0;
222	flex-direction:column;
223	clear:both;
224}
225
226
227
228
229.hoverBtn a img{
230 	display:none;
231}
232
233
234
235nav ul {
236	flex-direction: column;
237}
238
239
240#menu li{
241	  max-width:100%;
242	  display: block;
243	  flex-direction: column;
244	  padding: 0; 
245	  overflow: hidden;
246}
247
248
249#menu li a:hover{
250
251	background:none;
252	
253}
254
255
256div.hoverBtn a {
257	position: relative;
258	z-index: 2;
259	display: block;
260	width: 500px;
261	height: 50px;
262	line-height: 30px;
263	text-align: center;
264	font-size: 1.1em;
265	text-decoration: none;
266	color:#babf8d;
267	font-weight:400;
268
269}
270
271
272.staff {
273	flex-direction: column;
274
275}
276
277
278.right-box {
279	display:block;
280}
281
282
283
284
285/*　ハンバーガーボタン　*/
286.hamburger {
287  display : block;
288  position: fixed;
289  z-index : 3;
290  right : 13px;
291  top   : 12px;
292  width : 42px;
293  height: 42px;
294  cursor: pointer;
295  text-align: center;
296}
297.hamburger span {
298  display : block;
299  position: absolute;
300  width   : 30px;
301  height  : 2px ;
302  left    : 6px;
303  background : #fff;
304  -webkit-transition: 0.5s ease-in-out;
305  -moz-transition   : 0.5s ease-in-out;
306  transition        : 0.5s ease-in-out;
307}
308.hamburger span:nth-child(1) {
309  top: 10px;
310}
311.hamburger span:nth-child(2) {
312  top: 20px;
313}
314.hamburger span:nth-child(3) {
315  top: 30px;
316}
317
318/* ナビ開いてる時のボタン */
319.hamburger.active span:nth-child(1) {
320  top : 16px;
321  left: 6px;
322  background : #fff;
323  -webkit-transform: rotate(315deg);
324  -moz-transform   : rotate(315deg);
325  transform        : rotate(315deg);
326}
327
328.hamburger.active span:nth-child(2),
329.hamburger.active span:nth-child(3) {
330  top: 16px;
331  background : #fff;
332  -webkit-transform: rotate(-315deg);
333  -moz-transform   : rotate(-315deg);
334  transform        : rotate(-315deg);
335}
336
337nav.globalMenuSp {
338  position: fixed;
339  z-index : 2;
340  top  : 0;
341  left : 0;
342  color: #fff;
343  background: rgba(0,0,0,0.7);
344  text-align: center;
345  width: 100%;
346  display: none;
347}
348
349nav.globalMenuSp ul {
350  margin: 0 auto;
351  padding: 0;
352  width: 100%;
353}
354
355nav.globalMenuSp ul li {
356  list-style-type: none;
357  padding: 0;
358  width: 100%;
359  transition: .4s all;
360}
361nav.globalMenuSp ul li:last-child {
362  padding-bottom: 0;
363}
364nav.globalMenuSp ul li:hover{
365  background :#ddd;
366}
367
368nav.globalMenuSp ul li a {
369  display: block;
370  color: #fff;
371  padding: 1em 0;
372  text-decoration :none;
373}
374
375
376
377
378}

試したこと

スマホで見た際に電話のアイコンが表示されるのですが、そのcssが別ファイルで

style.css
1/* タブレットだけに適用するCSS */
2@media screen and (max-width:767px){
3
4/* ロゴ画像 */
5	.logo {
6		width: 75% ;	
7	}
8
9#pankuzu li{
10	margin:0;
11	display:block;
12	text-align:right;
13}
14
15#pankuzu li img{
16	width:60%;
17}
18
19
20}
21
22
23#pankuzu li a {
24	display:block;
25	text-decoration:none;
26	color:#fff;
27}
28
29.phone {
30	width:300px;
31	height:90px;
32}
33
34.mail {
35	width:120px;
36	height:94px;
37}
38
39
40.phone_icon {
41	width:65px;
42	height:65px;
43	display:none;
44}
45
46
47@media screen and (max-width:479px){
48
49.phone_icon {
50	display:block;
51	float:right;
52}
53
54
55
56
57}
58
59

main.cssではなく、こちらにハンバーガーメニューのコードを書き込んだら表示されると思い、やってみましたがメニューとして機能しなかったので対処法がわかりません。

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

cssファイルは２つで読み込んでいて、ハンバーガーメニューはmain.cssの方だけです。

chamaki40

2022/10/28 14:52

自身でＣＳＳのコードを見直し、不要な箇所など使ってない部分や重複しているようなところはコメントアウトしましたが、やはり縦でみたときにハンバーガーメニューが開いても項目が出ません。 @media screen and (max-width:768px){ で横にしたときに表示されて縦でメニュー項目が消えるので、メディアクエリの問題とdisplayの問題というのはわかりますが、どこを修正したらいいのかわからないので回答できる方いたらお願い致します。サイトの運用など考えているのでこのままだとできません。　

chamaki40

2022/10/31 07:32

cssの不要なコードをコメントアウトして、メニューのnav要素をdisplay:block;にしたり色々やってたら縦でもメニューは表示できました。　あとは、ドロワーメニューにスマホで見た場合、background: rgba(0,0,0,0.7);が指定してありますが縦でみた時だけ透明になりません。　メディアクエリで@media screen and (max-width: 480px) { に同じ内容を書き足す必要があるのか教えてほしいです。本来、/* スマホだけに適用するCSS */ @media screen and (max-width:768px){ にbackground: rgba(0,0,0,0.7); を指定してあるので透明になるはずですが縦で見た場合だけ透明にならず背景がベタで表示されています。細かい修正点はまだあるのですが、メニュー部分の透明にする部分だけご教示頂ける方いたらお願い致します。