ラベルをクリックしたらメニューリストを表示、非表示にしたい

Question

ラベルをクリックしたら.header-nav内のメニューリストを表示、非表示にしたいです。現在記述のコードではラベルをクリックしても表示されません。どのように記述すれば.header-navを表示、非表示となるでしょうか？ご教授お願いいたします。

<div class="header">
 	<h1>
 	 <img src="logo.png" alt="ロゴ画像">
 	</h1>

    <div class="click">
     <label for="label1"><i class="fas fa-dice-three"></i></label>
    <input type="checkbox" id="label1" />
    </div>
     
    <!-- ここから非表示 -->
 	<ul class="header-nav">
 		<li><a href="#">会社概要
 			<p>Company</p></a></li>
 		<li><a href="#">サービス紹介
 			<p>Service</p></a></li>
 		<li><a href="#">採用状況
 			<p>Recruit</p></a></li>
 		<li><a href="#">お問い合わせ
 			<p>Contact</p></a></li>
 	</ul>
    <!-- ここまで -->

  </div>

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
     body {
        background-color:pink;
    }

    .container{
    width: 95%;
    margin: 0 auto;

    }

    .header{
     display: block;  

    }

    .click label{
        font-size: 40px;
    }

    .click input{
     display: none;
    }

    /*ロゴの中身を非表示*/
   .header-nav {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    }
　　
　　/*クリックして表示*/
    #label1:checked + .header-nav {
    padding: 100px ;
    height: auto;
    opacity: 1;

}

    .header-nav{
     display: flex;
     flex-wrap: wrap;
     width: 100%;
         
    }

    .header-nav li{
     width: 49.6%;
     height: 70px;
     border-bottom: 1px solid #ccc;
     border-top: 1px solid #ccc;
     margin-top: 0px ;
     margin: ;
     
    }
}

Answer 1

まず、下記の /*クリックして表示*/の前と前行に全角空白がありますので、それを削除してください。全角空白があるとコードはたいてい正常に動作しません。

  　　
  　　/*クリックして表示*/
      #label1:checked + .header-nav {
      padding: 100px ;
      height: auto;
      opacity: 1;

#label1:checked + .header-nav のセレクタで隣接兄弟結合子(+)を使ってますが、

隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

これは文字通り、隣り合った兄弟要素同士しか効きません。

現状のHTMLでは、#label1:checked と .header-nav は兄弟になってません。
兄弟関係になるようにHTMLを修正すれば動作するようになります。

下記のように clickクラスの中にheader-naクラスを入れればいいでしょう。

<div class="header">
  <h1>
    <img src="logo.png" alt="ロゴ画像">
  </h1>

  <div class="click">
    <label for="label1"><i class="fas fa-dice-three"></i></label>
    <input type="checkbox" id="label1" />


    <!-- ここから非表示 -->
    <ul class="header-nav">
      <li><a href="#">会社概要
        <p>Company</p></a></li>
      <li><a href="#">サービス紹介
        <p>Service</p></a></li>
      <li><a href="#">採用状況
        <p>Recruit</p></a></li>
      <li><a href="#">お問い合わせ
        <p>Contact</p></a></li>
    </ul>
    <!-- ここまで -->
  </div>
</div>

Comments

[dehi0923]

今訂正したら正常に作動しました。全角空白があると正常に作動しないのですね。勉強になりました！本当にありがとうございます。