ハンバーガーメニューでcheckボックス以外をクリックしたら閉じる

Question

checkボックスをクリックして左からメニューを出しています。
全部cssとhtmlだけでやっています。
メニューを開いたらメニュー以外を暗くなるようにしたのですが、checkボックスを押さなくてもメニュー以外をクリックしたらメニューが閉じるようにしたいです。
ですがなかなかできず知識もないので、うまく行きません、、、
やはりcssではできませんか？？

<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>
<div id="sidebarMenu">
  <ul class="sidebarMenuInner">
     <li><a href="">メニュー</a></li>
　　　<li><a href="">メニュー</a></li>
    </ul>
 </div><!--sidebarMenu-->



<!--↓クリックしたときに暗くなる要素-->
<div class="black-bg" id="js-black-bg"></div>

ここからcssです

@charset "utf-8";
/* CSS Document */

#sidebarMenu {
    height: 100%;
    position: fixed;
    z-index: 20;
    width:25%;
    background-color:#FFF;
    transform: translateX(-110%);
    transition: transform 250ms ease-in-out;
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 30, .2);

}
.sidebarMenuInner{
    width:80%;
    height:auto;
    margin:10px auto 0;
    padding:0;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 22px;
    left: 15px;
    height: 22px;
    width: 22px;
    position:fixed;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color:#f940a8;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}
.sidebarMenuInner{
	margin-top:60px;
	}
/*↓暗くなる要素*/
.black-bg {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background-color: #000;
    opacity: 0;
    visibility: hidden;/* 非表示にしておきます */
    -webkit-transition: all .6s;
    transition: all .6s;
    cursor: pointer;
}

input[type="checkbox"]:checked ~ .black-bg {
    opacity: .8;
    visibility: visible;
}

Comments

[K_3578]

出来ればコピペで再現できるソースコードを貼って欲しいのです>html

[ayuayuayu]

ありがとうございます。
少し編集させていただきました。
宜しくおねがいします。

[K_3578]

解決したようですが、反応頂けたのでついでに。

質問者さんの過去質問を見た所、未解決のまま放置されている質問が散見されました。
以降、質問等をされる時に過去質問に未解決のままの物が多い(回答が付いているものは特に)
と、回答者から敬遠される傾向があります。私は幾つかしか内容は見ていませんが、
その後ご自分で解決されたのなら自己解決として解決方法を書いてクローズを、
解決しなかったにしてもその旨を書いて閉じる、または質問を編集して回答を募って頂きたいです。

Answer 1

クリックしたときに暗くなる要素をラベルにして、チェックボックスと関連付ければいいでしょう。

↓クリックしたときに暗くなる要素
<label class="black-bg" id="js-black-bg" for="openSidebarMenu"></label>

Comments

[ayuayuayu]

わ！！！！！
全然気づけなかったです。。。
すぐにできました。本当にありがとうございます。