ハンバーガーアイコンで開き×印で閉じるメニューの実装ができない

前提・実現したいこと

こちらのサイト[https://marimo-dental.com/]の模写コーディングをしております。ハンバーガーアイコンをクリックすると右からメニューがスライドし、バツ印をクリックするとメニューが閉じるというものを実装したいです。

開くときはcheckboxを使って表示しています。

#input:checked + #content{
  transform:translatex(0px);
}

閉じるときはjQueryを使うしかないのかなと考え試行錯誤したのですが、どのようにコードをかいたらいいのかわかりません。ご教示いただけますと幸いです。

該当のソースコード

HTML
1
2 <div  class="bottom-access-right">
3
4   <label for ="input">
5    <div class="line"> </div>
6    <div class="line"> </div>
7    <div class="line"> </div>
8  </label>
9  <input type="checkbox" id="input">
10
11  <div id="content" >
12
13   <!-- ↓↓メニューを閉じるための×印（画像で）用意しています↓↓ -->
14      <div class="close-btn">
15        <img src="img/ico_cross_wh.svg ">
16      </div>
17
18  <div class="content-scroll">
19     <ul>
20        <li class="content-list">予防歯科</li>
21        <li class="content-list">予防歯科</li>
22        <li class="content-list">予防歯科</li>
23        <li class="content-list">予防歯科</li>
24        <li class="content-list">予防歯科</li>
25       </ul>
26    </div>
27  </div>
28  
29</div>
30```css

/* ハンバーガーでスライドメニュー↓ */

#input{
display:none;
}

.line{
width:38px;
height:2px;
background:skyblue;
margin:8px auto;
}

#content{
position:absolute;
left:0;
bottom:0;
z-index:30;
background:rgb(16, 146, 197);
width:105%;
height:100vh;
transform:translatex(105%);
transition:0.3s ease-in-out;
color:#fefefe;
}

.content-scroll{
overflow-Y:scroll;
height:500px;
position:absolute;
left:0;
top:50px;
padding-right:50px;

}

.close-btn{
position: fixed;
bottom:-10px;
right:10%;
}

#input:checked + #content{
transform:translatex(0px);

}

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

回答1件

ベストアンサー

まず、模写先を見ましたが、ハンバーガーアイコンはどこにも見当たりません。

チェックボックスを使ってハンバーガーメニューを作成するなら、jQueryは必要ないです。CSSのみで実装できます。
「CSSのみハンバーガーメニュー」で検索すればサンプルはいくらでも見つかります。

cssのみハンバーガーメニュー - Google 検索

チェックボックスと関連付けたlablで囲めばいいでしょう。 for属性で関連付けできます。

html
1    <div class="close-btn">
2     <label for="input">
3       <img src="img/ico_cross_wh.svg ">
4      </label>
5    </div>

投稿2020/11/07 02:28

編集2020/11/07 04:01

hatena19

総合スコア34075

poppoko

2020/11/07 03:23

ご回答ありがとうございます。模写先の画面右下のハンバーガーのアイコンのことを指しております。仰るように開けるときも閉じるときもこのアイコンをクリックすることで開閉させるならチェックボックスを使ってcssだけでできるというのは理解できました。ただ、開けるときは3本線のハンバーガーのアイコンをクリックし、さらにそのアイコンはメニューが上からかぶさるように展開することによってそのアイコン自体はメニュー下に隠れてしまうため、閉じるときはクリックできません。かわりにメニューと一緒に現れるバツ印の画像をクリックして閉じるということを実装したいのですが、それができずといった状態で悩んでおります。