ハンバーガーメニューを完成させたい

前提・実現したいこと

未完成のハンバーガーメニューを完成させたい。
ヘッダーの<ul>を複製して、一つをハンバーガーメニュー用にしました。
inputとlabelタブでメニューバーを作り、
クリックしたらメニューが消えたり出てきたりさせようとしたのですが、
うまく行きません。

見本（画像）を書いてみたのですが、
参考にして頂けましたら幸いです。

実現したいことは
①右上にメニューバーを設置。
②クリックしたら綺麗にメニューが表示される。
③レスポンシブの実装。

以上となります。

宜しくお願い致します。

【試したこと】
下記の動画を視聴して、動画に沿って作成しました。
ハンバーガーメニューをCSSで作る一番簡単な方法
https://www.youtube.com/watch?v=-KoRLJgpkE4

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

エラー画像

実現したい見本図

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4  <meta charset="UTF-8">
5  <link rel="stylesheet" href="style.css">
6  <title>portfolio</title>
7   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
8 </head>
9 
10 <header id="header">
11  <div class="header-wrapper">
12   <h1><a href="#"><img src="img/logo2.jpg" width="85px" hight="85px"></a></h1>
13<!---pc--->
14
15<div class="menu-pc">
16  <nav>
17   <ul>
18    <li><a href="#">BUONO!の特徴</a></li>
19    <li><a href="#">選べる3つのプラン</a></li>
20    <li><a href="#">対応エリア</a></li>
21    <li><a class="decoration" href="#">お問い合わせ</a></li>
22   </ul>
23   </nav>
24</div>
25<!---smafo--->
26
27<div class="menu-smafo">
28
29<input type="checkbox" id="input">
30<label for="input"><div class="line"></div><div class="line"></div><div class="line"></div></label>
31<div id="content">
32   <nav>
33   <ul>
34    <li><a href="#">BUONO!の特徴</a></li>
35    <li><a href="#">選べる3つのプラン</a></li>
36    <li><a href="#">対応エリア</a></li>
37    <li><a href="#">お問い合わせ</a></li>
38   </ul>
39   </nav>
40</div>
41</div>
42
43  </div>
44 </header>
45
46 <body>
47  <main id="main">
48   <div class="mainvisual">
49    <img class="img-main" src="img/mainvisual.jpg" alt="mainvisual">
50    <div class="black-wrapper">
51      <p class="text-a style">準備・片付けもお任せください!</p>
52      <p class="text-b style">ケータリング</p>
53      <p class="text-c style">1人 1,500円（税抜）～</p>
54      <p class="text-d style">BUONO!Catering</p>
55    </div>
56   </div>
57   
58   <section class="feature"> 
59    <div class="container">
60    <h2 class="title">BUONO!Cataring<br>3つの特徴</h2>
61　  <div class="container2">
62  　<div class="content">
63     <img class="feature-img" src="img/feature1.jpg" alt="feature1">
64     <h3>リーズナブルな価格<br>1人1,500円(税抜き)～</h3>
65      <p>
66BUONO! ではリーズナブル<br>
67な価格でサービスをご提供。<br>
68予算とご相談してプランを<br>
69決めていただけます。
70      </p> 
71    </div> 
72 
73
74  　<div class="content2">
75     <img class="feature-img" src="img/feature2.jpg" alt="feature2">
76     <h3>アドバイザーが<br>料理や演出をご提案</h3>
77      <p>
78専門のアドバイザーが料理<br>
79の内容や、パーティーの演<br>
80出をご提案します。
81      </p> 
82    </div>
83
84  　<div class="content3">
85     <img class="feature-img" src="img/feature3.jpg" alt="feature3">
86     <h3>準備・片付けも<br>スタッフにお任せ!</h3>
87      <p>
88準備・片付けは当社のスタッ<br>
89フが行うので、お客様のお<br>
90手を煩わせません。
91      </p> 
92    </div>
93    </div>
94   </section> 
95
96   <section class="plan">
97    <div class="container">
98    <h2 class="title">選べる3つのプラン</h2>
99    <p="title2">お料理や飲み物、演出などはどのプランでもカスタマイズ<br>可能です。まずはお気軽にご相談ください。</p>
100    </div>
101    
102    <div class="container2">
103    <div class="content">
104     <img src="img/plan1.jpg" alt="plan1">
105    </div>
106    <div class="content-b">
107<h3 class="original">オリジナルプラン</h3>     
108<p>
10910人以上　1人1,500円(税抜)～
110</p>
111<p>
112お客様に合わせたプランをコーディネーターが<br>
113ご提供します。まずはご予算やパーティーの形<br>
114式をお伺いします。
115</p>
116<p>
117何も決まっていなくても、お気軽にご相談くだ<br>
118さい?
119</p>
120</div>
121</div>
122
123 <div class="container3">
124    <div class="content">
125     <img src="img/plan2.jpg" alt="plan2">
126    </div>
127    <div class="content-b">
128<h3>フィンガーフードプラン</h3>     
129<p>
13010人以上　1人2,000円(税抜)～
131</p>
132<p>
133一口で食べられるお食事をご提供するプランで<br>
134す。立食パーティーに最適です。
135</p>
136</div>
137</div>
138
139 <div class="container4">
140    <div class="content">
141     <img src="img/plan3.jpg" alt="plan3">
142    </div>
143    <div class="content-b">
144<h3>贅沢プラン</h3>     
145<p>
14610人以上　1人3,000円(税抜)～
147</p>
148<p>
149伊勢海老や和牛など、ぜいたくな食材をふんだ<br>
150んに使用したお料理を提供するプランです。
151</p>
152</div>
153</div>
154    </div>
155   </section>
156
157
158  </main>
159 </body>
160
161</html>

CSS
1@charset "utf-8"
2
3#post_contents ul li { list-style-type:none; background-image:none; padding-left:0; }
4
5a {
6 text-decoration: none;
7 color: #4b4b4b; 
8}
9
10h1 {
11 margin: 0; padding: 0;
12}
13
14#header li {
15 list-style: none;
16 display: inline-block;
17 margin: 0 0 0 30px ;
18 font-size: 14px;
19}
20
21ul {
22 display: flex;
23 margin: 0;
24 padding: 0;
25 align-items: center;
26}
27
28header {
29 width: 100%;
30 padding: 30px 4% 10px;
31 background-color: #fff;
32 position: fixed;
33 top: 0;
34
35}
36
37#header .header-wrapper {
38 display: flex;
39 justify-content: center;
40 align-items: center;
41}
42
43#header img {
44 border-radius: 30px;
45}
46
47#header .decoration {
48  color: #fff;
49  background: #6f5436;
50  padding: 5px 15px;
51  display: inline-block;
52  border-radius: 5px;
53  text-decoration: none;
54}
55
56* {
57   box-sizing: border-box;
58}
59
60body {
61   margin: 0;
62   padding: 0;
63   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
64   background-color: #e6e6e6;
65}
66
67#main .img-main {
68 width: 100%;
69 height: 600px;
70 object-fit: cover;
71}
72
73#main .mainvisual {
74 position: relative;
75 z-index:-1;
76}
77
78.mainvisual .style {
79 color: #fff;
80}
81
82.mainvisual .text-d {
83 position: absolute;
84 top: 38%;
85 left: 18%;
86 font-size: 500%;
87}
88
89.mainvisual .text-a {
90 position: absolute;
91 top: 65%;
92 left: 18%;
93}
94
95.mainvisual .text-b {
96 position: absolute;
97 top: 75%;
98 left: 18%;
99}
100
101.mainvisual .text-c {
102 position: absolute;
103 top: 80%;
104 left: 18%;
105}
106
107.feature .title {
108 text-align: center;
109}
110
111.feature-img {
112 height: 135px; 
113}
114
115.feature .title {
116 margin: 15px 0 0;
117 font-size: 18px;
118}
119
120.feature .container2 {
121 display: flex;
122 justify-content: center;
123}
124
125.feature h3 {
126 margin: 0;
127 font-size:14px;
128}
129
130.container2 h3 {
131 text-align: center;
132}
133
134.container2 p {
135 text-align: left;
136 font-size: 14px;
137 margin: 5px 0 0;
138}
139
140.plan img {
141 width: 300px;
142} 
143
144.container2 {
145 display: flex;
146}
147
148.container3 {
149 display: flex;
150}
151
152.container4 {
153 display: flex;
154}
155
156.plan h2 {
157 margin: 50px 0 15px;
158} 
159
160.plan .container {
161 text-align: center;
162}
163
164.plan .container2 {
165 justify-content: center;
166 margin: 0 0 10px;
167}
168
169.plan .container3 {
170 justify-content: center;
171 margin: 0 0 10px;
172}
173
174.plan .container4 {
175 justify-content: center;
176 margin: 0 0 10px;
177}
178
179.plan .content-b {
180 text-align: left;
181 font-size: 14px;
182 margin: 0 0 0 15px;
183}
184
185.wrapper-area {
186 width: 600px;
187 margin: 0 auto;
188 font-size: 14px;
189}
190
191.area h2 {
192 text-align: center;
193 margin: 0 0 10px;
194}
195
196.area .margin {
197 margin-bottom: 25px;
198}
199
200.lead-form {
201 text-align: center;
202 margin: 20px 0 3px;
203}
204
205.lead-form2 {
206 text-align: center;
207 font-size: 14px;
208}
209
210form {
211 width: 450px;
212 margin: 0 auto;
213}
214
215.item {
216 overflow: hidden;
217 margin-bottom: 20px;
218}
219
220.label {
221 float: left;
222 margin-right: -30px;
223 width: 135px;
224}
225
226input.inputs {
227 width: 300px;
228 float: left;
229 border: solid 1px #aaa;
230 border-radius: 5px;
231 padding: 10px;
232 font-size: 15px;
233}
234
235textarea {
236 border: solid 1px #aaa;
237 border-radius: 5px;
238 padding: 10px;
239 height: 100px;
240 font-size: 15px;
241 width: 300px;
242}
243
244.btn-area {
245 text-align: center;
246}
247
248.size {
249 margin-bottom: 10px;
250}
251
252.inquiry-call .inquiry-call2 {
253 width: 600px;
254 margin: 0 auto;
255 text-align: center;
256}
257
258.button-top {
259 text-align: right;
260}
261
262.inquiry-call h2 {
263 margin: 30px 0 0;
264}
265
266.inquiry-call p {
267 margin: 0;
268}
269
270/* footer */
271
272#footer .footer2{
273 width: 500px;
274 margin: 0 auto;
275}
276
277#footer p {
278 margin: 0;
279}
280
281#footer .font {
282 font-size: 14px;
283}
284
285#footer .margin-bottom {
286 margin-bottom: 30px;
287}
288
289.footer-copy {
290 text-align: center;
291 font-size: 10px;
292}
293
294/*ハンバーガーメニュー*/
295
296#input {
297 display: none;
298}
299
300.line{
301 width:20px;
302 height: 3px;
303 background-color: black;
304 margin: 3px;
305}
306
307#content{
308 background-color: gray;
309 width: 300px;
310 height: 100px;
311 transform: translateX(-200px);
312}
313
314#input:checked ~ #content{
315	transform: translatex(0px);　
316}
317
318
319
320/*メディアクエリ*/
321
322@media screen and (max-width: 580px) {
323
324.feature .container2 {
325 flex-direction: column;
326 text-align: center;
327 width: 300px;
328 margin: 0 auto;
329}
330
331.feature .container2 p {
332 text-align: center;
333}
334
335#main .text-d {
336 font-size: 40px;
337 position: absolute;
338 top: 50%;
339 left: 18%;
340}
341
342.feature-img {
343 width: 300px;
344 height: 200px;
345}
346
347.feature p br{
348 display: none;
349 text-align: left;
350}
351
352.plan .container2 {
353 display: block;
354 text-align: center;
355 margin-bottom: 20px;
356}
357
358.container2 h3 {
359 margin: 0 0 5px;
360}
361
362.container2 p {
363 width: 300px;
364 margin: 0 auto;
365}
366
367.container3 h3 {
368 margin: 0 0 5px;
369}
370
371.plan .container3 {
372 display: block;
373 text-align: center;
374 margin-bottom: 20px;
375}
376
377.container3 p {
378 width: 300px;
379 margin: 0 auto;
380}
381
382.container3 h3 {
383 text-align: center;
384}
385
386.container4 h3 {
387 margin: 0 0 5px;
388}
389
390.plan .container4 {
391 display: block;
392 text-align: center;
393 margin-bottom: 20px;
394}
395
396.container4 p {
397 width: 300px;
398 margin: 0 auto;
399}
400
401.container4 h3 {
402 text-align: center;
403}
404
405.area .wrapper-area {
406 width: 300px;
407 margin: 0 auto;
408}
409
410.form-table {
411 width: 100%;
412 border-bottom: none;
413 display: block;
414}
415
416.inquiry-call .inquiry-call2 {
417 text-align: center;
418 width: 300px;
419 margin: 0 auto;
420}
421
422.label {
423 display: block;
424 float: none;
425}
426
427.inputs {
428 display: block;
429}
430
431form {
432 width: 300px;
433 margin: 0 auto;
434}
435
436.item {
437 margin: 0;
438}
439
440#footer .footer3 {
441 margin-left: 4%;
442}
443
444.menu-pc {
445 display: none;
446
447
448}
449
450@media screen and (min-width: 580px) {
451
452.menu-smafo{
453 display: none;
454}
455}
456
457}
458
459

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

とりあえず、translateX→translateYとしてみてはどうですか？

投稿2021/04/13 02:45

Lhankor_Mhy

総合スコア36960

JAQKxsuke

2021/04/13 13:15

ひとまずハンバーガーメニューバーを押すと、メニューが消えるようになりました。

Lhankor_Mhy

2021/04/13 13:25

ご解決ですか？

JAQKxsuke

2021/04/13 14:03 編集

まだ教えて欲しいことあるんですが、下記でレスポンシブを効かせて、画面サイズ580px以下に限りメニューバーを表示するようにしました。その際に、メニューバーを右に設置、ロゴは左に表示させたいのですが、どのようにすればよろしいでしょうか？ @media screen and (min-width: 581px) { .menu-smafo { display: none; } } お手数をおかけしますが、よろしくお願いします。

JAQKxsuke

2021/04/13 14:32

ハンバーガーアイコンを右上に設置ですが、下記で試しましたが上手く行きませんでした。 .menu-smafo{ left: auto; right: 5px; }

Lhankor_Mhy

2021/04/13 15:24

.menu-smafo が大きすぎるので、小さくすればいいかと思います。大きさの原因である #content を絶対配置などでフローから外すのもアリです。あとは、親要素の justify-content を適切に変更すれば、それっぽくなるのではないかと思います。

JAQKxsuke

2021/04/13 22:28

＞.menu-smafo が大きすぎるので、小さくすればいいかと思います。大きさの原因である #content を絶対配置などでフローから外すのもアリです。 .menu-smafoを小さくして、#header .header-wrapperにjustify-content: space-betweenをかけることで上手くいきました。ありがとうございます。最後にレスポンシブ時にメイン画像が右にスクロールすると途切れてしまう症状を直したいです、画像をwidth: 100%にしても変化ありませんでした。よろしくお願いします。

JAQKxsuke

2021/04/13 22:32

こちらをスマホからご確認ください。サイトURL：メイン画像を右スクロールしてみてください。 http://jaqkxsuke.sakura.ne.jp/Portfolio/index.html

Lhankor_Mhy

2021/04/14 01:07

そもそも横スクロールを発生させるのがよくないように思うのですが……それでいいのですか？

JAQKxsuke

2021/04/14 06:15

そうなんですね、基本は横スクロールできないんですね。であれば、横スクロールしない形で作りたいと思います。

Lhankor_Mhy

2021/04/14 06:25

別にダメということはないんですが…… 自分でそのページを見る時に、縦横両方のスクロールをしないと見ることができないページって、見づらくないですか？もちろん、意図があって敢えてそうしているのであればそれでいいと思います。