【javascript】ハンバーガーメニュー作成（メニュー外のクリック動作）

目標

Xボタンだけでなく、右側の表示領域をクリックしても、
ハンバーガーメニューが閉じるようにします。

開発環境

ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

前提

【Javascript】ハンバーガーメニュー作成（左、上、右から表示）
今回は上記記事の補足になります。

実際のコード

html

<div id="box"></div> <!-- 追加 -->
<nav id="nav">
  <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
    <li><a href="#">リンク3</a></li>
  </ul>
</nav>
<div id="hamburger">
  <span class="inner_line" id="line1"></span>
  <span class="inner_line" id="line2"></span>
  <span class="inner_line" id="line3"></span>
</div>

<style>
body{
   background-color: rgba(0,0,0,0.2);
 }

#nav{
  position: absolute;
  height: 100vh;
  width: 40%;
  left: -40%;
  top: 0;
  background: #ffffff;
  transition: .7s;
}
#nav ul{
  padding-top: 80px;
}
#nav ul li{
  list-style-type: none;
}
#hamburger {
  display: none;
  position: absolute;
  top: 20px;
  left: 30px;
  width: 50px;
  height: 44px;
  transition: 1s;
}
.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #000000;
  transition: 1s;
  border-radius: 4px;
}
#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  bottom: 0px;
}

.in{
  transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  background: #000000;
}
.line_1 {
  transform: translateY(20px) rotate(-45deg);
  top: 0;
}
.line_2 {
  opacity: 0;
}
.line_3 {
  transform: translateY(-20px) rotate(45deg);
  bottom: 0;
}

/* ここから*/

#box{
  position: absolute;
  height: 100vh;
  width: 100%;
  left: -100%;
  top: 0;
  background: rgba(0,0,0,0.8);
}
.back{
  transform: translateX(100%);
}

/* ここまで追加*/


@media (max-width: 1200px) {
  #hamburger {
    display: block;
  }
}
</style>

<script>
  function hamburger(){
    document.getElementById('line1').classList.toggle('line_1');
    document.getElementById('line2').classList.toggle('line_2');
    document.getElementById('line3').classList.toggle('line_3');
    document.getElementById('nav').classList.toggle('in');
    document.getElementById('box').classList.toggle('back'); // 追加
  };
  document.getElementById('hamburger').addEventListener('click',function(){
    hamburger();
  });

  // ここから
  document.getElementById('box').addEventListener('click',function(){
    hamburger();
  });
// ここまで追加
</script>

追加項目

追加箇所-html

<div id="box"></div>

追加箇所-css

#box{
  position: absolute;
  height: 100vh;
  width: 100%;
  left: -100%;
  top: 0;
  background: rgba(0,0,0,0.8);
}
.back{
  transform: translateX(100%);
}

追加箇所-js

document.getElementById('box').classList.toggle('back');

document.getElementById('box').addEventListener('click',function(){
  hamburger();
});

まとめ

方法としては前提記事同様、画面外に表示させておき、
classList.toggle('back')でbackクラスを付与して表示させています。
アニメーションもつけることはできますが、
一緒に出てくると少し違和感があったので、アニメーションはつけていません。

もしスクロールアウトしてもハンバーガーメニューを表示させたい場合は、
#nav,#hamburger,#boxのposition: absolute;をposition: fixed;
に変更すれば可能です。

またtwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら　https://twitter.com/japwork