ハンバーガーメニューの背景色について

Question

前提・実現したいこと

ハンバーガーメニューをクリックした時の背景が常時表示されてしまいます。
ハンバーガーメニューが表示された時に、黒い背景を非表示にしたいです。

<div id="nav-drawer">
    <input id="nav-input" class="none" type="checkbox">
    <label id="nav-open" for="nav-input"><span></span></label>
    <label id="nav-close" class="none" for="nav-input"></label>
  <nav id="nav-content" class="header__navigation">
    <ul>
      <li><a class="nav-drawer__link_top none" href="#home">Home</a></li>
      <li><a href="#menu">メソッド</a></li>
      <li><a href="＃access">コーチ紹介</a></li>
      <li><a href="＃news">Q</a></li>
      <li><a href="＃news">店舗一覧</a></li>
      <li><a href="＃news">体験レッスン</a></li>
    </ul>
</nav>
</div>

@media (max-width : 1000px ){
  /*ハンバーガーアイコン*/
  #nav-drawer{
    padding: 10px 24px 0 0;
    text-align: right;
    position: relative;
  }
  #nav-open{
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 22px;
  }
  #nav-open span,#nav-open span:before,#nav-open span:after{
    position: absolute;
    height: 3px;
    width: 25px;
    background-color: #777;
    display: block;
    content:"";
  }
  #nav-open span:before{
    bottom: -8px;
  }
  #nav-open span:after{
    bottom: -16px;
  }
  #nav-close{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    
  }
  #nav-content{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 70%;
    background-color: #FFF;
    height: 100%;
    text-align: left;
    padding: 15px 0 0 24px;
    transform: translateX(-105%);
    transition: 0.3s ease-in-out;
    box-shadow: 5px 0 25px rgba(0,0,0,0.25);
  }
  .nav-drawer__title{
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #FA6980;
    margin-bottom: 46px;
  }
  .nav-drawer__link_top{
    display: block;
    
  }
  #nav-content ul li{
    margin-bottom: 36px;
  }
  #nav-content ul li a{
    text-decoration: none;
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
  }
    #nav-input{
    display: none;
  }
  #nav-input:checked ~ #nav-close{
    display: block;
  }
  #nav-input:checked ~ #nav-content{
    transform: translateX(0%);
  }
}

Answer 1

ハンバーガーメニューをクリックする前はopacity: 0;で透明にしておいて、クリックしたら(#nav-input:checked)、opacity: .5;で表示させればどうでしょう。

@media (max-width : 1000px ){
  /*ハンバーガーアイコン*/
  #nav-drawer{
    padding: 10px 24px 0 0;
    text-align: right;
    position: relative;
  }
  #nav-open{
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 22px;
  }
  #nav-open span,#nav-open span:before,#nav-open span:after{
    position: absolute;
    height: 3px;
    width: 25px;
    background-color: #777;
    display: block;
    content:"";
  }
  #nav-open span:before{
    bottom: -8px;
  }
  #nav-open span:after{
    bottom: -16px;
  }
  #nav-close{
    z-index: -1;                 /* 修正 非表示の時はクリックできないように */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;                   /* 修正 */
    transition: 0.3s ease-in-out; /* 追加 */
  }
  #nav-content{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 70%;
    background-color: #FFF;
    height: 100%;
    text-align: left;
    padding: 15px 0 0 24px;
    transform: translateX(-105%);
    transition: 0.3s ease-in-out;
    box-shadow: 5px 0 25px rgba(0,0,0,0.25);
  }
  .nav-drawer__title{
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #FA6980;
    margin-bottom: 46px;
  }
  .nav-drawer__link_top{
    display: block;

  }
  #nav-content ul li{
    margin-bottom: 36px;
  }
  #nav-content ul li a{
    text-decoration: none;
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
  }
    #nav-input{
    display: none;
  }
  #nav-input:checked ~ #nav-close{
    display: block;
    opacity: .5;  /* 追加 */
    z-index: 999; /* 追加 */
  }
  #nav-input:checked ~ #nav-content{
    transform: translateX(0%);
  }
}

Comments

[kurumi_chester]

凄く分かりやすく教えて頂きありがとうございます！精進します。ありがとうございました！！！