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

前提・実現したいこと

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

HTML
1<div id="nav-drawer">
2    <input id="nav-input" class="none" type="checkbox">
3    <label id="nav-open" for="nav-input"><span></span></label>
4    <label id="nav-close" class="none" for="nav-input"></label>
5  <nav id="nav-content" class="header__navigation">
6    <ul>
7      <li><a class="nav-drawer__link_top none" href="#home">Home</a></li>
8      <li><a href="#menu">メソッド</a></li>
9      <li><a href="＃access">コーチ紹介</a></li>
10      <li><a href="＃news">Q</a></li>
11      <li><a href="＃news">店舗一覧</a></li>
12      <li><a href="＃news">体験レッスン</a></li>
13    </ul>
14</nav>
15</div>

css
1@media (max-width : 1000px ){
2  /*ハンバーガーアイコン*/
3  #nav-drawer{
4    padding: 10px 24px 0 0;
5    text-align: right;
6    position: relative;
7  }
8  #nav-open{
9    display: inline-block;
10    vertical-align: middle;
11    width: 25px;
12    height: 22px;
13  }
14  #nav-open span,#nav-open span:before,#nav-open span:after{
15    position: absolute;
16    height: 3px;
17    width: 25px;
18    background-color: #777;
19    display: block;
20    content:"";
21  }
22  #nav-open span:before{
23    bottom: -8px;
24  }
25  #nav-open span:after{
26    bottom: -16px;
27  }
28  #nav-close{
29    z-index: 999;
30    position: fixed;
31    top: 0;
32    left: 0;
33    width: 100%;
34    height: 100%;
35    background-color: black;
36    opacity: 0.5;
37    
38  }
39  #nav-content{
40    display: block;
41    position: fixed;
42    top: 0;
43    left: 0;
44    z-index: 9999;
45    width: 70%;
46    background-color: #FFF;
47    height: 100%;
48    text-align: left;
49    padding: 15px 0 0 24px;
50    transform: translateX(-105%);
51    transition: 0.3s ease-in-out;
52    box-shadow: 5px 0 25px rgba(0,0,0,0.25);
53  }
54  .nav-drawer__title{
55    display: block;
56    font-size: 1.2rem;
57    font-weight: 600;
58    color: #FA6980;
59    margin-bottom: 46px;
60  }
61  .nav-drawer__link_top{
62    display: block;
63    
64  }
65  #nav-content ul li{
66    margin-bottom: 36px;
67  }
68  #nav-content ul li a{
69    text-decoration: none;
70    display: block;
71    font-size: 1.6rem;
72    font-weight: 600;
73    color: #333;
74  }
75    #nav-input{
76    display: none;
77  }
78  #nav-input:checked ~ #nav-close{
79    display: block;
80  }
81  #nav-input:checked ~ #nav-content{
82    transform: translateX(0%);
83  }
84}

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

回答1件

ベストアンサー

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

css
1@media (max-width : 1000px ){
2  /*ハンバーガーアイコン*/
3  #nav-drawer{
4    padding: 10px 24px 0 0;
5    text-align: right;
6    position: relative;
7  }
8  #nav-open{
9    display: inline-block;
10    vertical-align: middle;
11    width: 25px;
12    height: 22px;
13  }
14  #nav-open span,#nav-open span:before,#nav-open span:after{
15    position: absolute;
16    height: 3px;
17    width: 25px;
18    background-color: #777;
19    display: block;
20    content:"";
21  }
22  #nav-open span:before{
23    bottom: -8px;
24  }
25  #nav-open span:after{
26    bottom: -16px;
27  }
28  #nav-close{
29    z-index: -1;                 /* 修正 非表示の時はクリックできないように */
30    position: fixed;
31    top: 0;
32    left: 0;
33    width: 100%;
34    height: 100%;
35    background-color: black;
36    opacity: 0;                   /* 修正 */
37    transition: 0.3s ease-in-out; /* 追加 */
38  }
39  #nav-content{
40    display: block;
41    position: fixed;
42    top: 0;
43    left: 0;
44    z-index: 9999;
45    width: 70%;
46    background-color: #FFF;
47    height: 100%;
48    text-align: left;
49    padding: 15px 0 0 24px;
50    transform: translateX(-105%);
51    transition: 0.3s ease-in-out;
52    box-shadow: 5px 0 25px rgba(0,0,0,0.25);
53  }
54  .nav-drawer__title{
55    display: block;
56    font-size: 1.2rem;
57    font-weight: 600;
58    color: #FA6980;
59    margin-bottom: 46px;
60  }
61  .nav-drawer__link_top{
62    display: block;
63
64  }
65  #nav-content ul li{
66    margin-bottom: 36px;
67  }
68  #nav-content ul li a{
69    text-decoration: none;
70    display: block;
71    font-size: 1.6rem;
72    font-weight: 600;
73    color: #333;
74  }
75    #nav-input{
76    display: none;
77  }
78  #nav-input:checked ~ #nav-close{
79    display: block;
80    opacity: .5;  /* 追加 */
81    z-index: 999; /* 追加 */
82  }
83  #nav-input:checked ~ #nav-content{
84    transform: translateX(0%);
85  }
86}