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

# 目標
Xボタンだけでなく、右側の表示領域をクリックしても、
ハンバーガーメニューが閉じるようにします。
![ハンバーガーメニュー.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700999/bcfe85e6-c5c6-371a-1741-52f998e74891.gif)

# 開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

# 前提
[【Javascript】ハンバーガーメニュー作成（左、上、右から表示）](https://qiita.com/japwork/items/9c48544498186844fa1b)
今回は上記記事の補足になります。

# 実際のコード

```erb: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>
```
# 追加項目

```erb:追加箇所-html
<div id="box"></div>
```
```css:追加箇所-css
#box{
  position: absolute;
  height: 100vh;
  width: 100%;
  left: -100%;
  top: 0;
  background: rgba(0,0,0,0.8);
}
.back{
  transform: translateX(100%);
}
```
```js:追加箇所-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